Webpack 性能优化

[CongratulateWE]

提升Webpack打包速度的方法

• 跟上技术的迭代（webpack、node、npm、yarn）
• 优化 plugin 的使用，保证plugin的可靠性
• 优化 loader 配置
• 合理配置 resolve.extensions，resolve.modules，resolve.alias
• 使用 DLLPlugin 插件
• 使用 cache-loader
• terser 启动多线程
• 合理使用 sourceMap

跟上技术的迭代（webpack、node、npm、yarn）

合理配置 Loader

在使用loader时，可以通过配置include、exclude、test属性来精确匹配文件，include、exclude规定哪些匹配应用loader
，减少无谓的代码分析。

module.exports = {
  module: {
    rules: [
      {
        // 如果项目源码中只有 js 文件就不要写成 /\.jsx?$/，提升正则表达式性能
        test: /\.js$/,
        // babel-loader 支持缓存转换出的结果，通过 cacheDirectory 选项开启
        use: ['babel-loader?cacheDirectory'],
        // 只对项目根目录下的 src 目录中的文件采用 babel-loader
        include: path.resolve(__dirname, 'src'),
      },
    ]
  },
};

优化 plugin 的使用，保证plugin的可靠性

比如在开发环境下我们不需要对代码进行压缩，可以删掉插件来节省压缩代码的时间。比如在开发环境中，我们不需要考虑用户加载速度， 可以去掉用来压缩样式代码的 OptimizeCSSAssertsPlugin；
在我们不清楚源码的情况下，尽量使用官方提供的插件，经过了官方验证，性能可能会比较好；

合理配置 resolve

resolve.extension

可以帮助我们补全 import/require 文件的后缀，默认值是 ['.js', '.json', '.wasm']。
当我们引入文件的时候，若没有文件后缀名，则会根据数组内的值依次查找

当我们配置的时候，则不要随便把所有后缀都写在里面，这会调用多次文件的查找，这样就会减慢打包速度

resolve.alias

alias给一些常用的路径起一个别名，特别当我们的项目目录结构比较深的时候，一个文件的路径可能是./../../的形式

通过配置alias以减少查找过程

module.exports = {
    ...
    resolve:{
        alias:{
            "@":path.resolve(__dirname,'./src')
        }
    }
}

resolve.modules

resolve.modules 用于配置 webpack 去哪些目录下寻找第三方模块。默认值为['node_modules']，所以默认会从node_modules中查找文件
当安装的第三方模块都放在项目根目录下的 ./node_modules 目录下时，所以可以指明存放第三方模块的绝对路径，以减少寻找，配置如下：

module.exports = {
  resolve: {
    // 使用绝对路径指明第三方模块存放的位置，以减少搜索步骤
    // 其中 __dirname 表示当前工作目录，也就是项目根目录
    modules: [path.resolve(__dirname, 'node_modules')]
  },
};

使用 DLLplugin 插件

DllPlugin 和 DllReferencePlugin 提供了拆分包的方法，可以极大地提高构建时性能。
DLL全称是 动态链接库，是为软件在winodw种实现共享函数库的一种实现方式，而Webpack也内置了DLL的功能，为的就是可以共享，不经常改变的代码，抽成一个共享的库。这个库在之后的编译过程中，会被引入到其他项目的代码中

使用步骤分成两部分：

打包一个 DLL 库

可以把不变的库打包到 dll 文件夹下， 只在第一次打包的时候做分析，之后就直接引用了。

webpack 内置了一个 DllPlugin 可以帮助我们打包一个DLL的库文件, DLLPlugin 一般会在一个单独的 webpack 配置文件中，会生成一个 manifest.json 文件.

module.exports = {
    ...
    plugins:[
        new webpack.DllPlugin({
            name:'dll_[name]',
            path:path.resolve(__dirname,"./dll/[name].mainfest.json")
        })
    ]
}

引入 DLL 库

使用 webpack 自带的 DllReferencePlugin 插件对 mainfest.json 映射文件进行分析，获取要使用的DLL库

然后再通过AddAssetHtmlPlugin插件，将我们打包的DLL库引入到Html模块中

const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
    ...
    optimization: {
        minimize: true,
        minimizer: [
            new TerserPlugin({
                parallel: true // 电脑cpu核数-1
            })
        ]
    }
}

参考：febobo/web-interview#132