Webpack 3一些代码体积优化方案的小结

小咪咪 2022-05-21 02:51 244阅读 0赞

# 前言 #

之前接手公司一个前端项目，开发了几个月后越来越难以忍受项目结构的混乱和打包体积的臃肿（脚手架和基本功能代码都是从公司的其他项目复制过来的），如果不立即进行重构，难以想象以后要怎么维护各个产品线。于是我自告奋勇承担了项目框架的优化任务，这里分享一下我在打包体积优化中所研究的成果，经过几轮的努力，成功的将我们这个 `react`\+`antd`\+`immutable`\+`rxjs`的较大项目从打包后的`9MB`降低到了`2.5MB`，首屏加载（gzip）从`600KB+`降低到了`200KB`，并且基本上将稳定的第三方库，`webpack runtime`代码和业务代码完全分离，最低限度减少网站更新时用户需要加载的代码量。  
废话不多说，下面详细说明我所做的每一个步骤。

## 1. 优化第三方库 ##

项目里对库的使用较为混乱，有些库安装了但很少用或者根本没用，但是又在`webpack`中的`vendor`入口指定打包了进来，造成体积上的浪费，所以需要仔细评估每个库是否必要安装。  
`react v16`对比`react v15`，加上`react-dom`，体积上降低了30%，因此果断升级。

## 2. `moment.js` ##

分析完`stats.json`后，发现的第一个问题就是`moment`很大，具体原因`webpack`是把所有的`locale`文件打包了进来。我们的项目不需要多语言，因此我们可以使用`ContextReplacementPlugin`插件来舍弃中文之外的其他语言文件：

new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /zh-cn/)

去除掉`locale`后，又发现了另一个问题：依赖分析显示，我的项目里打包了两份`moment`，一份`es module`版的，一份`umd`版的。经过一番排查后发现，使用`import 'moment'`导入的会加载`es module`版的，这是`webpack`配置的`mainFields`决定的，但是在`locale`中的语言文件中，它会用相对路径导入`umd`版的`moment`，这就导致我的项目里出现了两份`moment`。为了统一版本，我们将`moment`设置为一个别名并指向`umd`版：

alias: {
      'moment$': path.resolve('node_modules/moment/moment'),
    },
    // $表示绝对匹配

## 3. `ECharts` ##

项目之前是直接使用的完整版的`echarts`，并且没有将`echarts`组件抽取为公共`chunk`，结果导致每个异步加载的页面组件，只要用了`echarts`就会变得硕大无比。  
解决方案：在`echarts`官网定制一份仅包含项目所需图表类型的阉割版，并且将`echarts`组件抽取为异步加载的`chunk`，这样就只需要加载一次。  
关于如何将组件抽取为单独的`chunk`，可以用`import()`语法，或者使用`react-loadable`这个库，它可以直接将`react`组件包装成异步组件，并在需要时才进行加载。

## 4. 抽取异步加载的`chunk`中的公共代码 ##

上面的步骤抽取`echarts`就是指的抽取异步`chunk`中的公共代码，除了`echarts`之外还有很多大体积的公共代码，例如各种`antd`的组件以及其依赖的底层组件`rc-components`，这部分也是我们要提取出来的。我们没必要将每个`antd`组件包装为异步组件，这里只需要配置一下`CommonsChunkPlugin`就可以了：

new webpack.optimize.CommonsChunkPlugin({
      async: 'async-vendor',
      deepChildren: true,
      minChunks: (module) => {
        return /node_modules/.test(module.context);
      },
    }),

在没有将`children`设为`true`时，`CommonsChunkPlugin`会从入口文件(`entry`)提取公共代码，这时就不会对异步加载的`chunk`起作用。因此为了提取异步`chunk`的公共代码，我们设置`deepChildren`为`true`（`children`指的是入口文件的直接子节点，`deepChildren`指的是全部子节点）。`async`表示生成一个懒加载的`chunk`，只有当需要时才会被加载。

## 5. 并非每个路由页面组件都需要异步加载 ##

项目之前的做法是，每个路由对应的页面根组件都需要异步加载，这样做的结果是打包出了很多个`chunk`，而有一半的`chunk`在`gzip`之前体积都不足`5KB`，浪费请求是一方面，更严重的是影响了首屏加载体积。  
这是为什么？明明把每个页面都异步加载了，怎么会影响首屏体积呢？其实原因就是第三步中的`async-vendor`被首屏加载了，该`chunk`主要包含了`antd`组件，`gzip`之后约为`120KB`。  
对于用户来说，第一次打开我们的网站一定是到登录界面，此时需要完全加载我们的首屏代码，之后有了缓存，除了业务代码更新需要加载很小的`chunk`之外，理论上是不需要再下载任何代码的，因此我们需要针对登录界面进行首屏优化。  
登录界面包含了登录、修改密码、申请账号等子路由，之前将这些都打包为异步`chunk`，由于这些界面需要`async-vendor`当中的某几个`antd`组件，因此首屏加载一定会包含`async-vendor`。拆分`async-vendor`是一种办法，但是还要分析到底用了哪些组件，改动业务代码后又要重新分析，显得很麻烦，最简单的做法就是取消登录相关路由的异步加载，将其打包到`main`当中，同时只需加载需要的`antd`组件，因此完全避免了加载`async-vendor`，首屏体积得到了大大降低。

## 6. 分离出`webpack runtime`代码 ##

`webpack`在客户端运行时会首先加载`webpack`相关的代码，例如`require`函数等，这部分代码会随着每次修改业务代码后发生变化，原因是这里面会包含`chunk id`等容易变化的信息。如果不抽取出来将会被打包在`vendor`当中，导致`vendor`每次都要被用户重新加载，`vendor`也失去了它的意义。分离的配置很简单：

new webpack.optimize.CommonsChunkPlugin({ name: 'manifest', minChunks: Infinity, }),

`minChunks: Infinity`表示创建一个什么都没有的`chunk`，因为不会有任何模块被无限次引用过，这样`webpack runtime`代码就会被`CommonsChunkPlugin`放入这个最后的`chunk`当中。

## 7. `webpack`内部优化 ##

这部分内容很简单，就两个插件的使用，`HashedModuleIdsPlugin`和`ModuleConcatenationPlugin`。  
默认情况下，`webpack`会为每个模块用数字做为`ID`，这样会导致同一个模块在添加删除其他模块后，`ID`会发生变化，不利于缓存。为了解决这个问题，有两种选择：`NamedModulesPlugin`和`HashedModuleIdsPlugin`，前者会用模块的文件路径作为模块名，后者会对路径进行`md5`处理，降低了文件体积，相比较而言，应该开发时选择前者，生产环境选择后者。  
`ModuleConcatenationPlugin`主要是作用域提升，将所有模块放在同一个作用域当中，一方面能提高运行速度，另一方面也能降低文件体积。前提是你的代码是用`es`模块写的。

## 8. `babel-polyfill` ##

`polyfill`也是体积很大的一部分，但是又不得不加载，关于这部分的优化可以参考这篇文章，[ES6和Babel你不知道的事儿][ES6_Babel]。还有一种方法是使用`polyfill.io`，这个解决思路个人觉得很不错，但是还不敢在生产环境用，先观望观望。

## 总结 ##

以上内容是我这些天找资料研究的结果，总的来说打包体积算是得到了有效控制，关于`chunk`的打包配置如下：

entry: {
        main: path.join(process.cwd(), 'src/index.js'),
        vendor: [
          'babel-polyfill', 'immutable', 'moment', 'react', 'react-dom' ...
        ],
    },
    output: {
        filename: '[name].[chunkhash].js',
        chunkFilename: '[name].[chunkhash].chunk.js',
    },
    plugins: [
        new webpack.HashedModuleIdsPlugin(),
        
        new webpack.optimize.ModuleConcatenationPlugin(),
        
        new webpack.optimize.CommonsChunkPlugin({
          async: 'async-vendor',
          deepChildren: true,
          minChunks: (module) => {
            return /node_modules/.test(module.context);
          },
        }),
        
        new webpack.optimize.CommonsChunkPlugin({
          name: 'vendor',
        }),
        
        new webpack.optimize.CommonsChunkPlugin({
          name: 'manifest',
          minChunks: Infinity,
        }),
    ]

`webpack 4`已经出了，再也没有`CommonsChunkPlugin`了，取而代之的是`SplitChunksPlugin`，看来又要研究新的东西了。。。

[ES6_Babel]: https://segmentfault.com/a/1190000012328326