Vue项目Lighthouse提示avoid enormous network payloads 带~的chunk文件优化

这类文件是webpack SplitChunks插件默认规则下生成的异步路由公共依赖包：

• 路由配置中给异步组件写的webpackChunkName注释，作用是给每个单独的路由分包定义名称
• 打包阶段webpack会扫描所有异步chunk的依赖关系，当某部分模块被多个异步chunk共同引用、且满足SplitChunks预设的提取阈值（比如被至少2个chunk引用、压缩前体积超过20KB等），就会把这部分公共模块抽离为独立chunk
• 这类公共chunk的默认命名规则，是把所有引用它的异步chunk名称用~符号拼接，文件名过长时会自动做截断处理，最终生成你看到的/js/usersetting~dashboard~settings~productsettings~userpr….js这类文件。

• 先定位大体积模块来源。Vue项目直接执行npx vue-cli-service build --report（Vue CLI项目）或者配置webpack-bundle-analyzer插件，构建完成后会自动生成包体积分析报告，直接定位这类公共chunk里占体积最高的模块：
  • 如果是第三方大依赖（比如echarts、xlsx、lodash、全量引入的组件库），优先做按需引入：lodash只导入实际用到的方法、echarts只注册使用的图表和组件、UI组件库配置按需加载规则，避免全量导入打进公共包
  • 如果是业务侧的公共组件/工具函数，检查是否存在整包导入但实际只用了极小部分代码的情况，拆分细粒度的导入路径，不要把低复用的模块硬抽到公共目录
  • 如果是大体积的静态JSON、配置文件，优先放到CDN异步拉取，不要直接import打进JS包
• 调整SplitChunks拆包规则，避免跨太多路由的超大公共包生成。默认拆包规则很容易把被3个及以上路由引用的模块全部塞进同一个公共chunk，导致不管访问哪个路由都要先加载这个大文件，可以在vue.config.js中调整配置，按模块类型拆成粒度更细的小包：

// vue.config.js 配置示例
module.exports = {
  chainWebpack: config => {
    config.optimization.splitChunks({
      chunks: 'async',
      cacheGroups: {
        // 第三方node_modules依赖单独拆包，不和业务公共模块混装
        vendors: {
          name: 'chunk-vendors',
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          chunks: 'initial',
          // 单个依赖超过100KB单独拆包，避免多个大依赖合并成一个巨型文件
          maxSize: 100000
        },
        // 业务公共模块拆包规则调整
        common: {
          name: 'chunk-common',
          minChunks: 2,
          priority: -20,
          chunks: 'async',
          maxSize: 200000,
          reuseExistingChunk: true
        }
      }
    })
  }
}

• 低频大依赖做动态懒加载，不要顶层静态引入。比如xlsx、富文本编辑器、PDF预览组件这类只有用户触发特定操作才会用到的依赖，不要在组件顶层写import，而是在触发对应逻辑的时候用import()动态引入，这类依赖就不会被抽到跨路由公共chunk里，只有实际用到时才会加载。
• 检查路由懒加载写法是否规范。确认没有在路由配置文件、全局Vuex store、全局注册组件里静态import路由页面组件，否则会打乱webpack的分包逻辑，把本该属于单个路由的依赖提前抽到公共chunk里。
• 开启传输层压缩。构建时开启gzip预压缩，部署时配合Nginx的gzip静态资源规则，JS文件传输体积可以降到原体积的30%左右，直接降低实际网络负载。

注意：不要为了消除这类带~的公共chunk强行关闭SplitChunks的公共依赖提取，否则会导致每个路由分包都重复打入相同的依赖代码，用户访问不同路由时会重复加载相同内容，整体加载体积反而会升高。优化的核心是把公共chunk拆分成体积合理、复用度匹配的小包，而非完全移除公共chunk。

内容的提问来源于stack exchange，提问作者seary