webpack5.x性能优化之代码分包配置文件分离多入口 SplitChunks cacheGroups runtimeChunk dynamic import(动态导入) 懒加载魔法注释

本文链接：https://blog.youkuaiyun.com/weixin_45747310/article/details/123871318

webpack优化

代码分离

认识代码分离

代码分离（Code Splitting）是webpack一个非常重要的特性：

它主要的目的是将代码分离到不同的bundle中，之后我们可以按需加载，或者并行加载这些文件；
比如默认情况下，所有的JavaScript代码（业务代码、第三方依赖、暂时没有用到的模块）在首页全部都加载，就会影响首页的加载速度；
代码分离可以分出出更小的bundle，以及控制资源加载优先级，提供代码的加载性能；

Webpack中常用的代码分离有三种：

入口起点：使用entry配置手动分离代码；
防止重复：使用Entry Dependencies或者SplitChunksPlugin去重和分离代码；
动态导入：通过模块的内联函数调用来分离代码；

多入口起点

入口起点的含义非常简单，就是配置多入口：

比如配置一个index.js和main.js的入口；
他们分别有自己的代码逻辑；

Entry Dependencies(入口依赖)

假如我们的index.js和main.js都依赖两个库：lodash、dayjs

如果我们单纯的进行入口分离，那么打包后的两个bunlde都有会有一份lodash和dayjs；
事实上我们可以对他们进行共享；

配置很灵活，import也可以是再次多入口，是多个文件。

SplitChunks

另外一种分包的模式是splitChunk，它是使用SplitChunksPlugin来实现的：

因为该插件webpack已经默认安装和集成，所以我们并不需要单独安装和直接使用该插件；
只需要提供SplitChunksPlugin相关的配置信息即可；

Webpack提供了SplitChunksPlugin默认的配置，我们也可以手动来修改它的配置：

比如默认配置中，chunks仅仅针对于异步（async）请求，我们可以设置为initial或者all；

chunks

async：当设置chunks的值为async时，只有在异步加载模块的时候，才会进行分包处理该模块
initial：同步加载模块的时候，也会进行分包处理。
all：同步异步都会进行分包处理

默认值是async
另一个值是initial，表示对通过的代码进行处理
all表示对同步和异步代码都进行处理**（最为常用）**

其他的splitChunks属性(很少手动配置)

minSize和maxSize

minSize的优先级高于maxSize，

minSize：拆分出的包的大小，至少为该minSize的值，默认值是20000B大小，如果需要拆分的包的大小不足该值的大小，是不会进行分包的。
- 拆分包的大小, 至少为minSize；
- 如果一个包拆分出来达不到minSize,那么这个包就不会拆分；
maxSize：将大于maxSize的包，再次拆分为大于minSize，但是不会大于maxSize的包。

minChunks

在模块中，使用（import，require）等关键字引入其他模块的时候，只有引入次数大于等于该值时，才会进行分包。

至少被引入的次数，默认是1；
如果我们写一个2，但是引入了一次，那么不会被单独拆分

cacheGroups

缓存组，出现在缓存组中的模块，不会直接分包，而是在所有模块加载完毕以后再根据缓存组配置的内容进行分包处理。

用于对拆分的包就行分组，比如一个lodash在拆分之后，并不会立即打包，而是会等到有没有其他符合规则的包一起来打包
test属性：匹配符合规则的包；
name属性：拆分包的name属性；
filename属性：拆分包的名称，可以自己使用placeholder属性；

// 优化
  optimization: {
   
    // 代码压缩操作
    minimizer: [
      new TerserPlugin({
   
        // 去除注释信息
        extractComments: false,
      }),
    ],
    splitChunks: {
   
      chunks: "all",
      // chunks:"async" // 默认值 模块存在异步加载操作(import("文件")) 进行分离
      // 最小值 默认值：20000B ~ 拆分出来的最小的包的大小是 大概20KB
      minSize: 20,
      maxSize: 40000,
      minChunks: 1,
      cacheGroups: {
   
        // 第三方库 将匹配到的 node_modules下加载的库 都打包到vendors下面
        vendors: {