跳至主要內容

rollup-plugin-visualizer 替代插件 vite-bundle-analyzer

Bing🐣VueVueVue3FoamTreerollup-plugin-visualizervite-bundle-analyzer大约 1 分钟

rollup-plugin-visualizer 替代插件 vite-bundle-analyzer

不知道为什么，搜索vue3打包分析、vite打包分析，清一色的都是推荐的使用rollup-plugin-visualizer插件，我自己也使用过，感觉这个打包分析的插件生成的分析报告贼不好用，不支持放大缩小，只能点击模块进行放大，尝试了下按Exclude和Include关键词搜索也搜索不出内容，不知道是不是我使用有问题还是我搜索方式不对，总之感觉没有vue2的vue-cli-service生成的报告好使。

对比

image
image
image
image

vue-cli-service build --report提供的--report可以非常方便的生成打包分析报告，支持放大缩小，模块关键词搜索。

image
image

替代插件

后来根据关键词在Google上各种搜索，终于找到了可以替代的打包分析插件vite-bundle-analyzeropen in new window。

image
image

安装使用

yarn add vite-bundle-analyzer -D
# or
npm install vite-bundle-analyzer -D

import { defineConfig } from "vite";

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

export default defineConfig({
  plugins: [
    // ...your plugin
    analyzer({
      analyzerMode: "static" // 使用静态模式，会生成一个可以直接打开的html文件
      fileName: "report" // 生成Html的名称
    }),
  ],
});

// If you are using it in rollup you can import 'adapter' from package.
// Then use it with adapter(analyzer())

运行打包命令后打开生成的Html就能看到熟悉的界面了。

image
image