由 browserify 捆绑的 React 和 ReactDOM 比 react.min.js 和 react-dom.min.js 大

Question

我正在关注react getting started tutorial，一切都很好。 然后我尝试了解如何导入外部包，因此我开始使用 npm、browserify、watchify 等。 在同一个教程中有一个section dedicated to package managers。第一个问题是“为什么在他们写的教程中

var React = require('react');
var ReactDOM = require('react-dom');

但后来它们仍然包含原始文件，如下所示

<title>Hello React!</title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>

而不是只包含来自 browserify 的 bundle.js？ 我不清楚。

我有点忽略了这一点。所以我的 HTML 只包含整个捆绑包

<script src="bundle.js"></script>

就是这样生成的

browserify -t [ babelify --presets [ react ] ] index.js | uglifyjs > bundle.js

在我的 index.js 文件中有这些要求

var React = require('react');
var ReactDOM = require('react-dom');
var $ = require('jquery');

如果我去查看 bundle.js 的大小，就会有一些我不明白的地方。总大小为 520KB。太多只是一个小例子！ 如果我删除 require("jquery") 总大小下降到 388 KB，所以 jquery 重 132 KB，但如果我下载 jquery.min.js 大小只有 84 KB。 如果我删除 require("react-dom") 总大小下降到 70KB，这意味着 React DOM 重 318KB，而 react-dom.min.js 只有 1KB！！

这里发生了什么？ 我读到了 NODE_ENV var（老实说，我不明白如何/在哪里改变它的值），尝试了几个解决方案，但文件大小保持不变。 但这不是重点。

react-dom.min.js 是 1KB，react-dom.js 是 2KB！ 所以它似乎不是生产/开发环境，还是我错过了什么？

感谢任何能帮助我了解更多的人。

Answer 1

试试这个

browserify -t [ envify --NODE_ENV production babelify --presets [ react ] ] index.js | uglifyjs > bundle.js