记录一次Vite Vue项目打包CPU暴涨死机问题

起因

打包流程是这样的

采用Jenkins打包、因为项目打包放在打包服务器上，间歇性出现打包CPU直接爆了，服务器直接die了，需要重启服务器才能解决，从而也导致项目的其他服务出现异常。

项目技术

VUE3.4.20 + VITE5.4.3 + ELEMENT-PLUS

场景复现

不管在window还是linux上，都会出现CPU突然暴涨的问题

解决方案

直接贴解决方案，我的排查过程也是按照这个步骤来的。

• build 配置采用”esbuild“进行打包：

// vite.config.ts
build: {
    minify: "esbuild"
}

默认值也是esbuild。有些项目设置了为”terser“，terser会更小，但是占用的资源会更多。

设置了这个之后，可以稍微下降第一个峰值。

• css 配置去除charset限制规则

// vite.config.ts
css: {
    postcss: {
        plugins: [
          {
            postcssPlugin: 'internal:charset-removal',
            AtRule: {
              charset: (atRule) => {
                if (atRule.name === 'charset') {
                  atRule.remove();
                }
              }
            }
          }
        ],
    }
}

参考文献：github.com/evanw/esbui…

有伙伴测试，charset在行内插入，会导致很多warning，从而导致打包系统不断处理，时长不断增长。

最简单的测试，就是先不加入此条规则，查看打包后的产物css是否含有charset。

• 分包、去除压缩报告

仔细观察打包过程，两段CPU暴涨的时间分别发生在

1. render chunck....
2. computed gizp size....

我们前面两步，通过处理，只能降低第一段CPU暴涨到100%。

第二段的暴涨其实是在打包过程中，打包系统会做出gizp的压缩报告。

其实我觉得是不需要报告的，如要压缩，直接用"vite-plugin-compression"压缩就好了。

去除gizp的报告可以直接抹杀第二段CPU峰值。

// vite.config.ts
build: {
    // 去除gizp的报告、可以直接抹杀第二段峰值
    reportCompressedSize: false
}

分包的话就按照自己的项目来了，可以采用"rollup-plugin-visualizer"进行产物分析。

直接贴上我的分包，我这里用了ezuikit-js这个插件，这个插件包特别大，所以我把它分开了。

// vite.config.ts
build: {
  rollupOptions: {
    output: {
      manualChunks: {
        ['ezuikit-js']: ['ezuikit-js'],
        ['element-plus']: ['element-plus'],
      },
    },
}

最终结果

最后

其实应该是项目某些依赖包有问题，我在另外一个项目中，也出现了这种情况。那是因为引入了一个表情包的组件。在卸载之后就没问题了。

但是当前项目依赖包众多，暂无办法排查出具体哪个依赖包的问题，只能靠打包系统来处理峰值了。