减少Browserify的react.min.js和react-dom.min.js捆绑包 [英] Reduce Browserify bundle of react.min.js and 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屋!