前端性能提升之webpack打包优化

背景：项目打包只生产了两个js文件，文件体积很大，考虑修改打包策略，提高项目性能。下面以开发环境为例进行说明。

分析打包后js文件内容：
在chrome浏览器中打开coverage面板，发现首页加载的chunk-vendors.js和app.js的代码覆盖率较低，点击查看未使用的代码，发现大多为导入导出相关代码，并配有对应的sourcemap，并没有展示源代码，比如:

(function(module, exports, __webpack_requires__) {
  "use strict";
  eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value:true\n});\nexports.getListApi\n\n//# sourceURL=webpack://vue3-app/./src/api/deviceFile.js?");
  /**/
})

为便于查看原始代码，关闭sourcemap，修改vue项目配置：

configureWebpack:{
  devtool: false
}

coverage面板发现没有"webpack://vue3-app/..."的文件了，分别点击chunk-vendors.js和app.js，发现前者文件中未使用代码大多为第三方库（比如logicflow、moment）代码，后者文件中未使用代码大多为v-if为false时对应代码（为true时会使用该代码）。所以后期是对chunk-vendors.js进行优化。

分析包
安装webpack-bundle-analyzer，分析打包文件构成，发现chunk-vendors.js大小为18MB左右。

使用webpack-bundle-analyzer：

chainWebpack(config){
  // 注意：1.该工具会占用8888端口，如果多个项目都使用了该工具，注意避免端口互相占用导致该工具运行不起来。2.不要提交到开发环境流水线，流水线打包成功后会卡住一直不发布。
  config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin);
}

修改分包策略
把chunk-vendors.js拆分为多个包，根据实际情况修改下面的minSize配置，我修改后使得chunk-vendors.js拆分为7个包左右。

chainWebpack(config){
  config.optimization.splitChunks({
    chunks: 'all',
    maxInitialRequests: Infinity,
    minSize:600000, // 600kb以上的包在打包时进行拆分为单独的包
    cacheGroups:{
      vendors:{
        name(module){
          const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
          return `npm.${packageName.replace('@', '')}`;
        },
        test:/[\\/]node_modules[\\/]/, // 对node_modules用外层的以及vendors中打包规则
        priority:20,
        chunks:'initial'
      }
    }
  })
}

继续优化包
减小moment包大小，moment下locale中其他语言占用体积较大，默认是en语言包，无需其他语言情况下，可忽略locale下文件，不对其打包：

chainWebpack(config){
  config.plugin('ignore').use(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/));
}

其他措施：对lodash用lodash-webpack-plugin，对naive ui组件使用按需引入（项目中这两者均无明显效果，naive ui本身使用了它的大部分组件了）。