Question

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

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

我可以做些什么来减小它的尺寸？是否有任何良好的做法可以达到最小尺寸？

编辑：

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

Answer 1

使用webpack-uglify并禁用源映射可以将输出大大提高到合理的大小（对于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

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

如果您没有设法将您的捆绑包大小调整到您需要的位置，code-splitting is also an option。

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

React.js app.js文件大小

5 个答案: