Question

我跟随react getting started tutorial，一切都很好。然后我试着了解如何导入外部包，所以我开始使用npm，browserify，watchify等。从同一个教程中有一个section dedicated to package managers。第一个问题是＆＃34;为什么在他们编写的教程中

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（＆＃34; jquery＆＃34;）总大小下降到388 KB，那么jquery重132KB，但如果我下载jquery.min.js，大小只有84KB。如果我删除require（＆＃34; react-dom＆＃34;）总大小下降到70KB，则意味着React DOM重318KB，而react-dom.min.js只有1KB !!

这里发生了什么？我读到了NODE_ENV var（honeslty我没有理解如何/在何处更改其值），尝试了几个解决方案，但文件大小保持不变。但那不是重点。

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

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

1 个答案: