問題描述
我創建了包含 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.
資源:https://medium.com/modus-create-front-end-development/optimizing-webpack-production-build-for-react-es6-apps-a637e5692aea#.bug2p64de
這篇關于React.js app.js 文件大小的文章就介紹到這了,希望我們推薦的答案對大家有所幫助,也希望大家多多支持html5模板網!