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正在解析require中react-dom个react来自node_modules 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

捆绑尺寸仅略大于react：

react-dom

要解决此问题，您需要告诉Browserify排除--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

然后，您应该能够从库包中创建需要--exclude和react的应用程序包。请注意，用于创建应用程序包的Browserify命令应指定react-dom和node_modules的{{1}}选项 - 以便从库包中而不是browserify \ --exclude react \ --exclude react-dom \ app.js > bundle-app.js中指定它们：

php artisan queue:table

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

1 个答案: