减少 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 之外的非缩小源的包。

请注意，如果您仅捆绑 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