前言

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

pkmTdAA.png

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

插件:vite-bundle-analyzer

效果图:

pkmTr1f.png

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

教程

先安装依赖:

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"
  }
}

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

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

分类: vue 开发实战 标签: vite包体分析

评论

暂无评论数据

暂无评论数据

目录