React.js app.js文件大小

Question

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

我的构建app.js文件有1.1 MB.我觉得它很大.

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

编辑:

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

Answer 1

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

几个步骤:

设置devtool在配置的WebPack到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