React.js app.js 文件大小答案

【问题标题】：React.js app.js file sizeReact.js app.js 文件大小
【发布时间】：2015-01-22 20:53:40
【问题描述】：

我创建了包含 7 个页面和 13 个组件的非常简单的 react 应用程序。我正在使用 gulp 编译它，browserify 用于依赖项，所有文件都被最小化。

我构建的app.js 文件有1.1 MB。我觉得挺大的。

我能做些什么来减小它的大小？有什么好的做法可以实现最小尺寸吗？

编辑：

我没有依赖的源代码是91 KB。

【问题讨论】：

没有依赖的代码大小是多少？
@pablochan 好点！添加到问题中。
请包含您的构建脚本。您可以通过一些选择来产生巨大的影响。还请包括缩小和 gzip 大小，因为这才是真正重要的。
检查以确保您没有依赖项，而这些依赖项又需要它们自己的依赖项的不同版本；这可能会导致您的包中包含多个版本的库，例如 jQuery 或 Underscore。

标签： javascript gulp reactjs browserify

【解决方案1】：

使用 webpack-uglify 并禁用 source maps 可以大大提高输出到合理的大小（对于 hello world 应用程序约为 140kbs）

几个步骤：

将 webpack 配置中的 devtool 设置为 cheap-source-map 或 cheap-module-source-map 以便源映射不与输出捆绑：

{
  eval: 'cheap-source-map'
}

激活uglify插件或使用-p参数调用webpack

plugins: [
  new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: false
    }
  })
]

为生产定义节点环境会导致 webpack 删除测试助手并优化输出大小：

plugins: [
  new webpack.DefinePlugin({
    'process.env': {
      'NODE_ENV': JSON.stringify('production')
    },
  })
]

注意：这些步骤应仅用于生产构建，因为它们会增加构建时间。

资源： https://medium.com/modus-create-front-end-development/optimizing-webpack-production-build-for-react-es6-apps-a637e5692aea#.bug2p64de

【讨论】：

如果我使用 Create React App，我应该把这段代码放在哪里？谢谢

【解决方案2】：

在我看来，您只是有很多依赖项。在现代 JS 开发中，很容易过火并包含阳光下的每个库。人们往往会忘记，如果它们包含库 X，它们也会包含它的依赖项。

我唯一能推荐的就是仔细检查每一个并评估它实际上有多有用。如果您只是使用大型库的一小部分，请尝试用更小的东西替换它，或者推出您自己的解决方案。

也许你可以在这里找到替代品：microjs

【讨论】：

【解决方案3】：

这是我的插件代码，将 js 从大约 3MB 减少到 350KB：

plugins: debug ? [] : [ new webpack.DefinePlugin({ 'process.env': { 'NODE_ENV': '"production"' } }), new webpack.optimize.DedupePlugin(), new webpack.optimize.OccurenceOrderPlugin(), new webpack.optimize.UglifyJsPlugin({ mangle: true, sourcemap: false, compress: { warnings: false, } }), ]

【讨论】：

【解决方案4】：

看看browserify-shim。该库可帮助您使用 CDN 外包您的依赖项。因此，您在编译文件中的依赖项更少。

【讨论】：

【解决方案5】：

如果您无法将捆绑包大小调整到所需的大小，code-splitting is also an option。

我们的想法是，您不会一次发送整个应用程序的代码 - 您发送加载第一页所需的内容，然后根据需要延迟加载其他应用程序代码。

【讨论】：