基于 Webpack 的应用包体尺寸优化翻译自Optimising-Your-Application-Bundle-Size-With-Webpack,从属于笔者的 Web 前端入门与最佳实践 中的 React 入门与最佳实践系列。笔者翻译此文也是为了完善自己的技术体系内容,不过推荐直接浏览 Webpack 官方网站。
最近我在构建一个基于 React 的单页应用,当我用Google TestMySite来检测自己的站点时,它的反馈是加载时间过长,因此我开始考虑如何优化初次下载的包体大小。优化应用包体的第一步就是检视当前的包体组成,判断其中哪些依赖时必须的,我们在 Webpack 的回显中可以看到当前的包体大小:
$ webpack -p --progress Hash: dbce3735c9520e2dc682 Version: webpack 1.14.0 Time: 54264ms Asset Size Chunks Chunk Names dist/index.js 3.29 MB 0 [emitted] main dist/index.js.map 13.7 MB 0 [emitted] main [0] multi main 40 bytes {0} [built] + 1374 hidden modules
分析包体依赖
这里我们使用webpack-bundle-analyzer来分析 Webpack 生成的包体组成并且以可视化的方式反馈给开发者。我们可以使用npm
来安装该插件:
$ npm install --save-dev webpack-bundle-analyzer
然后我们需要修改webpack.config.js
来引入该插件:
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; // ... plugins: [new BundleAnalyzerPlugin()] // ...
然后我们照常使用 Webpack 编译之后,可视化的结果会被展示在http://localhost:8888/,你大概可以看到如下的交互界面:
这个交互插件应该能帮你分析哪些依赖占据了主要的包体大小,这也提醒我们在引入某个功能的时候,应该只引入需要的模块,以 Lodash 为例:
//1. Import the entire lodash library and add it to the bundle import lodash from 'lodash' lodash.groupBy(rows,'id') //2. Import only the required function from lodash import groupBy from 'lodash/groupBy' groupBy(rows,'id')
设置合适的 Node 环境变量
设置合适的环境变量能够帮助 Webpack 更好地去压缩处理依赖中的代码,我们需要在生产环境中将NODE_ENV
设置为production
:
plugins: [... new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }),..]
使用最小化的 SourceMap
当我们在生产环境下组合压缩 JavaScript 文件时,Webpack 会为我们生成某个 SourceMap 文件来映射源文件的内容。在开发环境中我们经常会将devtool
设置为eval
,这样会将大量的代码信息打包到输出包体中从而提升编译速度。而开发环境中我们可以将该项设置为eval-source-map
或者cheap-module-source-map
,详细介绍参考这里,我们比较切换前后的包体大小可以发现缩小了将近 1MB 的内容:
$ webpack -p --progress Hash: 68a52fddbcc2898a5899 Version: webpack 1.14.0 Time: 29757ms Asset Size Chunks Chunk Names dist/index.js 1.71 MB 0 [emitted] main dist/index.js.map 464 bytes 0 [emitted] main [0] multi main 40 bytes {0} [built] + 1365 hidden modules
其他常用插件
这里我列举几个常用的能够用于减少包体大小的插件,我们可以根据项目需求选择性的使用:
compression-webpack-plugin:该插件能够将资源文件压缩为
.gz
文件,并且根据客户端的需求按需加载。dedupeplugin:抽取出输出包体中的相同或者近似的文件或者代码,可能对于 Entry Chunk 有所负担,不过能有效地减少包体大小。
uglifyjsplugin:压缩输出块的大小,可以参考官方文档。
ignoreplugin:用于忽略引入模块中并不需要的内容,譬如当我们引入
moment.js
时,我们并不需要引入该库中所有的区域设置,因此可以利用该插件忽略不必要的代码。
... var CompressionPlugin = require("compression-webpack-plugin"); ... let config = { entry: path.join(__dirname,'../app/index'),cache: false,devtool: 'cheap-module-source-map',plugins: [ new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }),new webpack.optimize.DedupePlugin(),new webpack.optimize.UglifyJsPlugin({ mangle: true,compress: { warnings: false,// Suppress uglification warnings pure_getters: true,unsafe: true,unsafe_comps: true,screw_ie8: true },output: { comments: false,},exclude: [/\.min\.js$/gi] // skip pre-minified libs }),new webpack.IgnorePlugin(/^\.\/locale$/,[/moment$/]),new webpack.NoErrorsPlugin(),new CompressionPlugin({ asset: "[path].gz[query]",algorithm: "gzip",test: /\.js$|\.css$|\.html$/,threshold: 10240,minRatio: 0 }) ... ],
引入该插件后包体的体积会受到进一步的压缩:
$ webpack -p --progress Hash: 68a52fddbcc2898a5899 Version: webpack 1.14.0 Time: 29757ms Asset Size Chunks Chunk Names dist/index.js 1.54 MB 0 [emitted] main dist/index.js.gz 390 KB 0 [emitted] main dist/index.js.map 464 bytes 0 [emitted] main [0] multi main 40 bytes {0} [built] + 1365 hidden modules