javascript - React.js app.js 文件大小

Question

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

我构建的 app.js 文件有 1.1 MB。我认为它很大。

我可以做些什么来减小它的大小？是否有任何好的做法来实现最小尺寸？

编辑:

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

Answer 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