React.js app.js文件大小 [英] React.js app.js file size
问题描述
我创建了一个非常简单的react应用程序,其中包含7页和13个组件.我正在使用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并禁用源映射可以将输出显着提高到合理的大小(对于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.
这篇关于React.js app.js文件大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!