rollup-plugin-visualizer

> 编程语言

开源

⚖️ 可视化您的捆绑包

2.4K stars0 点赞1 次浏览

访问官网 GitHub

工具介绍

⚖️ 可视化您的捆绑包

Rollup 插件可视化器

可将您的软件包可视化并分析,以快速查看哪些模块占用了空间。

屏幕截图

安装

bash

npm install --save-dev rollup-plugin-visualizer

或者通过 yarn:

bash

yarn add --dev rollup-plugin-visualizer

要求

此套件需要 Node.js >= 22。

使用方法

导入插件:

javascript

import { visualizer } from "rollup-plugin-visualizer";

或者在 CommonJS 中:

javascript

const { visualizer } = require("rollup-plugin-visualizer");

Rollup(`rollup.config.js`)

javascript

import { visualizer } from "rollup-plugin-visualizer";

export default {
  plugins: [
    // Keep it last.
    visualizer(),
  ],
};

Rolldown(`rolldown.config.ts`)

javascript

import { defineConfig, type RolldownPlugin } from "rolldown";
import { visualizer } from "rollup-plugin-visualizer";

export default defineConfig({
  plugins: [visualizer() as RolldownPlugin],
});

Vite(`vite.config.js`)

javascript

import { visualizer } from "rollup-plugin-visualizer";

export default {
  plugins: [visualizer()],
};

Vite + TypeScript(`vite.config.ts`)

typescript

import { defineConfig, type PluginOption } from "vite";
import { visualizer } from "rollup-plugin-visualizer";

export default defineConfig({
  plugins: [visualizer() as PluginOption],
});

SvelteKit(`vite.config.js`)

javascript

import { visualizer } from "rollup-plugin-visualizer";

export default {
  plugins: [
    visualizer({
      emitFile: true,
      filename: "stats.html",
    }),
  ],
};

SvelteKit 可能会多次运行 Vite,因此您可以在 .svelte-kit/output 中获得 2-3 个生成的文件(请查看 Vite 日志以获取确切位置)。您还可以生成原始 JSON 报告,并将其与 CLI 合并。