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

Question

我想将一些 React 库与 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 代码。这是从哪里来的？

Answer 1

问题是 Browserify 正在将 react-dom 中的 require 调用解析为 node_modules 中的 react 模块。该模块的 package.json 将 main 指定为 react.js - 因此您最终得到一个包，其中除了 react.min.js.[=34= 之外还包含非缩小源]

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

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

捆绑包大小仅略大于 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 选项：

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 选项 - 以便库包而不是 node_modules 需要它们：

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

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

Reduce Browserify bundle of react.min.js and react-dom.min.js

browserify

reactjs