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

依赖错综复杂，如何判断是有效依赖

1. package.json

• webpack升到3以后，未使用的dependence不会被打包；
• devDependence和dependence基本没啥区别；即生产依赖放入dev中，也能正常打包；但我们仍需遵守依赖的放置规则，方便后续维护；

综上所述，package.json无法判断有效依赖。

2. 分包-SplitChunksPlugin

网页的分包可能理解有点困难，因为配置项比较多，但对比小程序的分包-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，防止生成重复chunksreuseExistingChunk: true,},default: {minChunks: 2,priority: -20,reuseExistingChunk: true,},},},},
};

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

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

---

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

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