减少Browserify的react.min.js和react-dom.min.js捆绑包 [英] Reduce Browserify bundle of react.min.js and react-dom.min.js

查看:92
本文介绍了减少Browserify的react.min.js和react-dom.min.js捆绑包的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想将一些React库与Browserify和-require 捆绑在一起,但由于文件大小而推迟了.

I want to bundle some React libs with Browserify and --require them, but was put off by the file size.

我使用以下Browserify命令:

I use the following Browserify command:

browserify path/to/react.min.js path/to/react-dom.min.js > libs.js

现在,react.min.js为21k,react-dom.min.js为122k,但是libs.js导致高达269k.肯定没有126k的Browserify开销吗?当我查看libs.js时,有很多添加的(未精简的)React代码.这是哪里来的?

Now, react.min.js is 21k, react-dom.min.js is 122k, but libs.js results in a whopping 269k. Surely there is not a Browserify overhead of 126k? When I look at libs.js there is a lot of added (unminified) React code. Where does this come from?

推荐答案

问题是Browserify正在将 react-dom 中的 require 调用解析为 node_modules 中的 react 模块.该模块的 package.json main 指定为 react.js -因此您最终得到一个包含未缩小源的包除了 react.min.js .

The problem is that Browserify is resolving the require call(s) in react-dom to the react module in node_modules. The package.json for that module specifies main as react.js - so you end up with a bundle that contains the the non-minified source in addition to react.min.js.

请注意,如果仅捆绑 react.min.js :

browserify \
--require ./node_modules/react/dist/react.min.js:react \
> bundle-react.js

bundle的大小仅比 react.min.js 大:

The bundle size is only slightly larger than react.min.js:

ls -l node_modules/react/dist/react.min.js
... 21339 Dec 23 09:43 node_modules/react/dist/react.min.js

ls -l bundle-react.js
... 22006 Dec 23 11:56 bundle-react.js

要解决此问题,您需要告诉Browserify排除 react react-dom ,因为您将为需要它们提供替代机制-是,您将要指定-require 选项:

To solve the problem, you need to tell Browserify to exclude react and react-dom, as you are going to provide an alternate mechanism for their being required - that is, you are going to specify the --require option:

browserify \
--exclude react \
--require ./node_modules/react/dist/react.min.js:react \
--exclude react-dom \
--require ./node_modules/react-dom/dist/react-dom.min.js:react-dom \
> bundle-lib.js

现在,捆绑包的大小应更接近合并后的缩小文件:

The bundle size should now be much closer to the combined, minified files:

ls -l node_modules/react/dist/react.min.js
... 21339 Dec 23 09:43 node_modules/react/dist/react.min.js

ls -l node_modules/react-dom/dist/react-dom.min.js
... 123996 Dec 23 09:43 node_modules/react-dom/dist/react-dom.min.js

ls -l bundle-lib.js
... 146227 Dec 23 11:39 bundle-lib.js

然后,您应该能够创建需要库捆绑包中的 react react-dom 的应用程序捆绑包.请注意,用于创建应用程序捆绑包的Browserify命令应为 react react-dom 指定-exclude 选项-因此必须使用它们从库捆绑包中获取,而不是从 node_modules 中获取:

You should then be able to create an application bundle that requires react and react-dom from your library bundle. Note that the Browserify command to create the application bundle should specify the --exclude option for react and react-dom - so that they are required from the library bundle and not from node_modules:

browserify \
--exclude react \
--exclude react-dom \
app.js > bundle-app.js

这篇关于减少Browserify的react.min.js和react-dom.min.js捆绑包的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆