基于 Webpack 的应用包体尺寸优化

2

基于 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

如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

dgburn · 2017年07月04日

开启gzip压缩,服务端需要做什么配置吗?我再webpack开启了以后build的文件既有js又有gz,如何区分从服务端加载

回复

0

如果服务器端放nginx下的话,可通过以下模块开启:

gzip_static on|off

nginx对于静态文件的处理模块 该模块可以读取预先压缩的gz文件,这样可以减少每次请求进行gzip压缩的CPU资源消耗。该模块启用后,nginx首先检查是否存在请求静态文件的gz结尾的文件,如果有则直接返回该gz文件内容。为了要兼容不支持gzip的浏览器,启用gzip_static模块就必须同时保留原始静态文件和gz文件。这样的话,在有大量静态文件的情况下,将会大大增加磁盘空间。我们可以利用nginx的反向代理功能实现只保留gz文件。 可以google"nginx gzip_static"了解更多
ccfish · 2017年08月08日
载入中...