性能优化2-删除无效引用

网页的分包可能理解有点困难，因为配置项比较多，但对比小程序的分包-subpackages（按目录来分），其实差不太多。
下面是splitChunksPlugin的默认配置

module.exports = {
  //...
  optimization: {
    splitChunks: {
      // 有3个参数，all，async，initial；多试试就知道咋回事了
      chunks: 'async',
      // 最小可分包的大小-bytes, 下面是20KB；小于当前值会被合并打包
      minSize: 20000,
      // 没用过
      minRemainingSize: 0,
      // 不懂：拆分前必须共享模块的最小 chunks 数
      minChunks: 1,
      // 下面两个请求：指的是当前文件中，通过import导入的各种文件数量（至于是否递归子项的import，尚需进一步确认）；并不是通常意义上的网络请求
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      // 分包的后的文件名，以及该文件中包含的依赖项
      cacheGroups: {
      	// 如下三种文件名都可以：defaultVendors，defaultvendors，'default-vendors'
        defaultVendors: {
          // 规则匹配依赖项名称，如仅需将vue和pinia打包在一起，则可以写成"test: /[\\/]node_modules[\\/]/[vue|pinia]"
          test: /[\\/]node_modules[\\/]/,
          // 权重，打包时会涉及到同一个文件夹，值越高，那么将会优先打包。
          priority: -10,
          // 重（chong）用，一般写true，防止生成重复chunks
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

说了这么一大堆，怎么删除无效引用呢？

• 上面不是设定了20Kb的文件上限吗？那最终到页面上的时候，通过网络面板，能看到加载的资源。
• 分析页面上加载的资源，是否是当前页面必须用到的。那如何分析呢？
• 获取资源中的关键字符和方法，去自己对应的页面中查询；如果没有，就去查node_modules依赖。
• 如果发现依赖已经没有使用，即可删除。
• 是不是觉得小题大做？明明可以直接找到文件，进行删除。可刚接手一个旧项目，领导让你做优化，项目中还有超大文件和各种复杂依赖，这个时候能直接删吗？肯定不能。

性能优化是一个螺旋向上的过程，基本无法一步到位。曾经遇到过一个情况，首屏加载了iconfont的字体库，问遍组内所有同学，说小图标已经全部切换成svg。删完之后发现首屏加载速度快了10%，且页面各图标显示正常；结果上线后，发现有两个深层次路径上的组件，图标缺失，于是紧急补了两个svg。

有的同学说，依赖都有用，一个都删不掉，这就涉及到下一篇文章说的异步加载。