js加版本号 webpack_带你深度解锁Webpack系列(优化篇)

(给前端大全加星标，提升前端技能)

作者：前端宇宙 公号 / 刘小夕(本文来自作者投稿)

前两篇文章中，主要是讲解了 Webpack 的配置，但是随着项目越来越大，构建速度可能会越来越慢，构建出来的js的体积也越来越大，此时就需要对 Webpack 的配置进行优化。

如果你还没有看过前两篇，推荐先阅读《带你深入解锁Webpack系列(基础篇) 》和 《带你深入解锁Webpack系列(进阶篇) 》

本文罗列出了十多种优化方式，大家可以结合自己的项目，选择适当的方式进行优化。这些 Webpack 插件的源码我大多也没有看过，主要是结合 Webpack 官方文档以及项目实践，并且花了大量的时间验证后输出了本文，如果文中有错误的地方，欢迎在评论区指正。

鉴于前端技术变更迅速，祭出本篇文章基于 Webpack 的版本号:

├── webpack@4.41.5 
└── webpack-cli@3.3.10 

本文对应的项目地址(编写本文时使用)供参考：https://github.com/YvetteLau/webpack/tree/master/webpack-optimize

量化

有时，我们以为的优化是负优化，这时，如果有一个量化的指标可以看出前后对比，那将会是再好不过的一件事。

speed-measure-webpack-plugin 插件可以测量各个插件和loader所花费的时间，使用之后，构建时，会得到类似下面这样的信息：

对比前后的信息，来确定优化的效果。

speed-measure-webpack-plugin 的使用很简单，可以直接用其来包裹 Webpack 的配置:

//webpack.config.js
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();

const config = {
    
    //...webpack配置
}

module.exports = smp.wrap(config);

1.exclude/include

我们可以通过 exclude、include 配置来确保转译尽可能少的文件。顾名思义，exclude 指定要排除的文件，include 指定要包含的文件。

exclude 的优先级高于 include，在 include 和 exclude 中使用绝对路径数组，尽量避免 exclude，更倾向于使用 include。

//webpack.config.js
const path = require('path');
module.exports = {
    
    //...
    module: {
    
        rules: [
            {
    
                test: /\.js[x]?$/,
                use: ['babel-loader'],
                include: [path.resolve(__dirname, 'src')]
            }
        ]
    },
}

下图是我未配置 include 和配置了 include 的构建结果对比：

2. cache-loader

在一些性能开销较大的 loader 之前添加 cache-loader，将结果缓存中磁盘中。默认保存在 node_modueles/.cache/cache-loader 目录下。

首先安装依赖：

npm install cache-loader -D

cache-loader 的配置很简单，放在其他 loader 之前即可。修改Webpack 的配置如下:

module.exports = {
    
    //...

    module: {
    
        //我的项目中,babel-loader耗时比较长，所以我给它配置了`cache-loader`
        rules: [
            {
    
                test: /\.jsx?$/,
                use: ['cache-loader','babel-loader']
            }
        ]
    }
}

如果你跟我一样，只打算给 babel-loader 配置 cache 的话，也可以不使用 cache-loader，给 babel-loader 增加选项 cacheDirectory。

cacheDirectory：默认值为 false。当有设置时，指定的目录将用来缓存 loader 的执行结果。之后的 Webpack 构建，将会尝试读取缓存，来避免在每次执行时，可能产生的、高性能消耗的 Babel 重新编译过程。设置空值或者 true 的话，使用默认缓存目录：node_modules/.cache/babel-loader。开启 babel-loader的缓存和配置 cache-loader，我比对了下，构建时间很接近。

3.happypack

由于有大量文件需要解析和处理，构建是文件读写和计算密集型的操作，特别是当文件数量变多后，Webpack 构建慢的问题会显得严重。文件读写和计算操作是无法避免的，那能不能让 Webpack 同一时刻处理多个任务，发挥多核 CPU 电脑的威力，以提升构建速度呢？

HappyPack 就能让 Webpack 做到这点，它把任务分解给多个子进程去并发的执行，子进