React.js app.js文件大小

Question

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

我的build'ed app.js文件有1.1 MB 。 我觉得它很大。

我该怎么做才能减小尺寸？ 是否有任何良好的做法来实现最小尺寸？

编辑：

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

Answer 1

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

几个步骤：

将devtool配置中的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

Answer 2

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

我唯一能推荐的就是通过每一个和评估，它实际上是多么有用。 如果您只是使用大型库的一小部分，请尝试将其替换为较小的库，或者推出自己的解决方案。

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

Answer 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, } }), ]

Answer 4

看看browserify-shim 。 该库可帮助您将依赖项外包给CDN。 因此，编译文件中的依赖项较少。

Answer 5

如果您无法将捆绑包大小设置为您需要的大小，则代码分割也是一种选择 。

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