复习webpack4之提升Webpack打包速度的方法

之前学习过webpack3的知识，但是webpack4升级后还是有很多变动的，所以这次重新整理一下webpack4的知识点，方便以后复习。

这次学习webpack4不仅仅要会配置，记住核心API，最好还要理解一下webpack更深层次的知识，比如打包原理等等，所以可能会省略一些比较基础的内容，但是希望我可以通过此次学习掌握webpack，更好地应对以后的工作。

1.跟上技术的迭代（Node，Npm，Yarn）

如果Node进行了版本更新，性能方面有所提升，webpack运行在node的基础上，性能也会跟着有所提升。

如果更新Npm和Yarn，模块之间遇到相互引用的情况下，新版本的包管理 工具 可能会更快的帮我们分析包依赖，做一些包的引用。

2.在尽可能少的模块上应用Loader

比如我们使用babel-loader的时候，不需要对node_modules也进行编译。

exclude: /node_modules/

因为通常来说，node_modules里面的js通常都被编译过了，我们再去重新编译一次就会造成浪费。

3.尽可能少的使用plugin，并且要保证plugin的可靠性

比如，我们在打包线上代码时，会压缩css，就会使用optimize-css-assets-webpack-plugin这个插件，但是在开发环境中，我们不需要压缩css，所以在两个配置文件中，做出不同的配置。

打包线上代码的配置：

在本地开发配置文件中就可以不加这个plugin。

另外我们在使用插件时，最好使用社区中验证过，性能比较好的插件。因为有一些个人开发的插件，性能得不到保证，会对打包速度有影响。

4.resolve参数合理配置

4.1 extensions

有时候我们引入一个文件，想配置成不写文件后缀的引入方式，就需要用到这个配置项。

这样webpack在引入文件时，就会去找后缀名为js和jsx的文件。

但是如果我们配置了很多类型的文件后缀，那么webpack打包时每次都要重复找这个文件，对性能就会有损耗，所以我们只把逻辑文件配置在extensions里面。

4.2 mainFiles

现在我们想引用一个文件夹下的index.js文件，有什么方法让webpack默认引入index.js文件呢

就可以写成

也可以多加配置

就可以写成

但是如果配置特别多，也是会影响到weback打包速度的。

4.3 alias

我们在写react和vue的时候，常常会配置alias，通过给目录设置别名，webpack打包的时候就能找到目录。

相当于

5.使用DllPlugin提升webpack打包速度

我们在开发过程中，难免引入第三方模块（比如lodash），而每次在打包的时候，都会重新去分析每个引入的包，分析完之后把他们打包到我们的代码中。其实第三方模块引入后，通常是不会改变的，我们可以把他们单独打包生成一个文件，只在第一次打包的时候分析他们，以后再打包时直接用分析的结果(实际是把第三方模块打包成文件，通过全局变量输出)。

我们先在webpack.config.js目录中（如果分环境打包，就在配置文件的目录中），新建一个webapck.dll.js。

假设我们这次引入了lodash这个第三方模块，那么要在webpack.dll.js中增加配置

然后需要在package.json中增加一个命令。

然后我们继续完善代码，先安装一个插件

cnpm install add-asset-html-webpack-plugin --save

复制代码

然后在webpack.common.js中引入插件

然后增加使用一个插件，意思是，向html中增加一个资源，这个资源的目录是dll下的vendor.dll.js。

然后我们启动npm run dev，发现这控制台中输入vendor，会出现一个函数，我们第一步就达成了，现在需要让我们的代码使用这个全局变量。

打开webpack.dll.js，增加如下配置。

意思是，要用DLLPlugin分析这个库，这个库就是我们输出的全局变量。

分析后会生成一个映射关系文件，我们可以配置文件生成的路径

这样打包出来就会多出一个文件。

然后在webpack.common.js中增加一个插件，帮我们处理映射关系，并且目录指向我们生成的json文件，这样他底层就会自动去全局变量中拿vendor。如果映射关系不存在，才会去node_modules中分析代码。

然后进行打包就能看到效果了

使用前

使用后

如果有多个映射关系文件，就要配置多份，也可以写成下面这种形式。

这样node会自动分析dll目录下有几个文件，帮我们自动去添加两个插件。

6.控制包文件大小

通过Tree Shaking对冗余代码的删除。配置SplitChunksPlugin对大文件进行拆分，拆分成一些小文件。

7.thread-loader，parallel-webpack，happypack 多进程打包

7.1 ParallelUglifyPlugin

ParallelUglifyPlugin可以把对JS文件的串行压缩变为开启多个子进程并行执行

首先安装webpack-parallel-uglify-plugin

cnpm i -D webpack-parallel-uglify-plugin
复制代码

在plugins中配置

new ParallelUglifyPlugin({
    workerCount: 3, //开启几个子进程去并发的执行压缩。默认是当前运行电脑的 CPU 核数减去1
    uglifyJS: {
        output: {
            beautify: false, //不需要格式化
            comments: false, //不保留注释
        },
        compress: {
            warnings: false, // 在UglifyJs删除没有用到的代码时不输出警告
            drop_console: true, // 删除所有的 `console` 语句，可以兼容ie浏览器
            collapse_vars: true, // 内嵌定义了但是只用到一次的变量
            reduce_vars: true, // 提取出出现多次但是没有定义成变量去引用的静态值
        }
    }
})
复制代码

7.2 HappyPack

HappyPack就能让Webpack把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。

首先安装happypack

cnpm i happypack@next -D
复制代码

在module中配置：

module: {
    rules: [{
        test: /\.js$/,
        //把对.js文件的处理转交给id为babel的HappyPack实例
        use: 'happypack/loader?id=babel',
        include: path.resolve(__dirname, 'src'),
        exclude: /node_modules/
    }, {
        //把对.css文件的处理转交给id为css的HappyPack实例
        test: /\.css$/,
        use: 'happypack/loader?id=css',
        include: path.resolve(__dirname, 'src')
    }]
}
复制代码

在plugins中配置

plugins: [
    //用唯一的标识符id来代表当前的HappyPack是用来处理一类特定文件
    new HappyPack({
        id: 'babel',
        //如何处理.js文件，和rules里的配置相同
        loaders: [{
            loader: 'babel-loader',
            query: {
                presets: [
                    "env", "react"
                ]
            }
        }]
    }),
    new HappyPack({
        id: 'css',
        loaders: ['style-loader', 'css-loader'],
        threads: 4, //代表开启几个子进程去处理这一类型的文件
        verbose: true //是否允许输出日子
    })
]
复制代码

8.sourceMap

结合之前的sourceMap文章，在不同环境用不同的sourceMap打包。

在平常开发中，推荐使用cheap-module-eval-source-map，这样报错提示比较完全，打包速度也比较快。

而线上代码如果也需要map映射的话，推荐使用cheap-module-source-map，这样报错提示会更好一些。

结语

除了这些方法，其实还有很多提升打包速度的方法，这需要我们在平常不断的积累，所以我们在日常开发中，要善于总结，把使用到的好的方法都记录下来，为以后的工作打下坚实的基础。