React.js app.js 文件大小

本文介绍了React.js app.js 文件大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

I created pretty simple react application containing 7 pages and 13 components. I am using gulp to compile it, browserify for dependencies, all files are minimized.

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

My build'ed app.js file has 1.1 MB. I think it is quite big.

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

What can I do to reduce its size ? Are there any good practices to achieve smallest size ?

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

My source code without dependencies is 91 KB.

推荐答案

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

Using webpack-uglify and disabling source maps can greatly improve the output to a reasonable size (~140kbs for a hello world application)

几个步骤:

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

Setting devtool in webpack config to cheap-source-map or cheap-module-source-map so the source maps are not bundled with the output:

{ eval: 'cheap-source-map' }

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

Activate uglify plugin or call webpack with -p argument

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

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

Defining node environment for production causes webpack to remove test helpers and optimize the ouput size:

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

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

Note: these steps should be only used for production builds as they increase the build time.

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