Reactjs 减少react.min.js和react-dom.min.js的Browserify包

我想将一些React lib与Browserify和

--require

捆绑在一起，但由于文件大小的原因而推迟

我使用以下Browserify命令：

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代码。这是从哪里来的？

问题是Browserify正在解决

react dom

中的

require

调用到

节点\u modules

中的

react

模块。该模块的

package.json

将

main

指定为

react.js

——因此，除了

react.min.js

之外，您还得到了一个包含非小型源代码的包

请注意，如果仅捆绑

react.min.js

：

browserify \
--require ./node_modules/react/dist/react.min.js:react \
> bundle-react.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

捆绑包大小仅略大于

react.min.js

：

browserify \
--require ./node_modules/react/dist/react.min.js:react \
> bundle-react.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

选项：

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

捆绑包大小现在应该更接近合并的缩小文件：

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

选项，以便它们是库捆绑包而不是

节点模块所需的：

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

所以这看起来像一个类似的问题（）。我还发现这篇关于治疗的博文（）解释得很好！非常感谢。我宁愿让Browserify和UglifyJS来处理它，但是构建大小的差异是巨大的！当我用未统一的版本创建一个
bundle libs.js
，
NODE_ENV=production
并通过UglifyJS传输时，我最终得到了一个280k大小的文件。Facebooks minifier比UglifyJS好得多吗？我没有仔细看它，但是
react
和
react dom
中的
lib
目录中有很多文件/模块。每个人都会得到一些棕色的样板。缩小的
dist
文件中使用的机制可能不太详细。此外，如果您通过Browserify转换使用UglifyJS，则缩小不会应用于Browserify的样板文件-仅应用于导入到捆绑包中的模块内容。