vite5 打包体积分析（对标webpack包体分析）

前言

之前的vite很多文章一直推荐使用的是rollup-plugin-visualizer插件，但是这个插件真的一点都不好用，和webpack的体积分析差太多了。

这次新项目中也需要用到体积分析，需要我找了很久，找到一个新的插件，基本上可以和webpack的体积分析差不多体验了。

插件：vite-bundle-analyzer

效果图：

相比较之前的还是挺好用的。

教程

先安装依赖：

pnpm i vite-bundle-analyzer -D

然后去vite.config.ts中配置：

import { defineConfig } from "vite";
import { analyzer } from "vite-bundle-analyzer";

export default defineConfig(({ mode }) => {
  return {
    plugins: [
      mode === "analyze" ? analyzer() : undefined
    ],
    ...
  }
}

利用mode的值判断是否需要启用插件。

为此我们还需要在package.json中配置一个专门的分析命令：

{
  "scripts": {
    "analyze": "vite build --mode analyze"
  }
}

为此搞定，以后需要包体分析，就调用这个命令。

当然这个插件还有很多配置参数，可以自行查看文档，目前该插件更新活跃，有望统一。