基于 Webpack 的应用包体尺寸优化
buddhistwwx
8年前
<p><img src="https://simg.open-open.com/show/b0951338e463ad4f82f00defd3311896.png"></p> <p>最近我在构建一个基于 React 的单页应用，当我用 Google TestMySite 来检测自己的站点时，它的反馈是加载时间过长，因此我开始考虑如何优化初次下载的包体大小。优化应用包体的第一步就是检视当前的包体组成，判断其中哪些依赖时必须的，我们在 Webpack 的回显中可以看到当前的包体大小：</p> <pre> <code class="language-python">$ 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</code></pre> <h2>分析包体依赖</h2> <p>这里我们使用 webpack-bundle-analyzer 来分析 Webpack 生成的包体组成并且以可视化的方式反馈给开发者。我们可以使用npm来安装该插件：</p> <pre> <code class="language-python">$ npm install --save-dev webpack-bundle-analyzer</code></pre> <p>然后我们需要修改webpack.config.js来引入该插件：</p> <pre> <code class="language-python">var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; // ... plugins: [new BundleAnalyzerPlugin()] // ...</code></pre> <p>然后我们照常使用 Webpack 编译之后，可视化的结果会被展示在 http:// localhost:8888/ ，你大概可以看到如下的交互界面：</p> <p>这个交互插件应该能帮你分析哪些依赖占据了主要的包体大小，这也提醒我们在引入某个功能的时候，应该只引入需要的模块，以 Lodash 为例：</p> <pre> <code class="language-python">//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')</code></pre> <h2>设置合适的 Node 环境变量</h2> <p>设置合适的环境变量能够帮助 Webpack 更好地去压缩处理依赖中的代码，我们需要在生产环境中将NODE_ENV设置为production:</p> <pre> <code class="language-python">plugins: [... new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }), ..]</code></pre> <h2>使用最小化的 SourceMap</h2> <p>当我们在生产环境下组合压缩 JavaScript 文件时，Webpack 会为我们生成某个 SourceMap 文件来映射源文件的内容。在开发环境中我们经常会将devtool设置为eval，这样会将大量的代码信息打包到输出包体中从而提升编译速度。而开发环境中我们可以将该项设置为eval-source-map或者cheap-module-source-map，我们比较切换前后的包体大小可以发现缩小了将近 1MB 的内容：</p> <pre> <code class="language-python">$ 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</code></pre> <h2>其他常用插件</h2> <p>这里我列举几个常用的能够用于减少包体大小的插件，我们可以根据项目需求选择性的使用：</p> <ul> <li> <p>compression-webpack-plugin :该插件能够将资源文件压缩为.gz文件，并且根据客户端的需求按需加载。</p> </li> <li> <p>dedupeplugin :抽取出输出包体中的相同或者近似的文件或者代码，可能对于 Entry Chunk 有所负担，不过能有效地减少包体大小。</p> </li> <li> <p>uglifyjsplugin :压缩输出块的大小，可以参考官方文档。</p> </li> <li> <p>ignoreplugin :用于忽略引入模块中并不需要的内容，譬如当我们引入moment.js时，我们并不需要引入该库中所有的区域设置，因此可以利用该插件忽略不必要的代码。</p> </li> </ul> <pre> <code class="language-python">... 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 }) ... ],</code></pre> <p>引入该插件后包体的体积会受到进一步的压缩：</p> <pre> <code class="language-python">$ 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</code></pre> <p> </p> <p>来自：https://zhuanlan.zhihu.com/p/24928279</p> <p> </p>