有没有 vite 的捆绑分析器？

Question

我们在 vite 中开发了一个应用程序，我想分析应用程序包，我找到了 rollup-plugin-analyzer，但它对我不起作用。

Answer 1

或者，您可以使用vite-bundle-visualizer，它使用rollup-plugin-visualizer：

npx vite-bundle-visualizer

用法

# In your vite project's root
$ npx vite-bundle-visualizer
# Then open stats.html in browser

$ npx vite-bundle-visualizer --help

vite-bundle-visualizer

Usage:
  $ vite-bundle-visualizer <command> [options]

Options:
  --template -t <template>  Template to use, options are "raw-data" (JSON), "treemap", "list" (YAML), "sunburst" and "network" (default: treemap)
  --output -o <filepath>    Output file path, should be "**/*.html" or "**/*.json" (default: /Users/kuss/project/sides/oss/vite-bundle-visualizer/stats.html)
  --open <open>             Should open browser after generated, except when template is "json" (default: true)
  -h, --help                Display this message

截图

展示台模板

树形图

$ npx vite-bundle-visualizer

旭日

$ npx vite-bundle-visualizer -t sunburst

网络

$ npx vite-bundle-visualizer -t network

原始数据

输出统计的原始数据（JSON）

# @deprecated vite-bundle-visualizer -t json
$ npx vite-bundle-visualizer -t raw-data

演示/stats.json

Answer 2

您可以使用rollup-plugin-visualizer;

import { visualizer } from "rollup-plugin-visualizer";
...
export default defineConfig({
  ...
  plugins: [
    ...
    visualizer({
      template: "treemap", // or sunburst
      open: true,
      gzipSize: true,
      brotliSize: true,
      filename: "analyse.html", // will be saved in project's root
    }) as PluginOption,
    ...
  ],
  ...
});