# @aklinker1/rollup-plugin-visualizer 中文文档

规范地址：https://npmcn.com/package/%40aklinker1/rollup-plugin-visualizer/

版本：5\.12\.0
npm 元数据更新时间：2024-02-23T21:32:01.267Z
中文译文更新时间：2026-11-05T16:57:47.200Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40aklinker1/rollup-plugin-visualizer
原文对照：https://npmcn.com/package/%40aklinker1/rollup-plugin-visualizer/?lang=original
项目主页：https://github.com/btd/rollup-plugin-visualizer
源码仓库：https://github.com/btd/rollup-plugin-visualizer

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：689 kB，39 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=14
- 运行依赖：4 个
- peer 依赖：rollup 2\.x \|\| 3\.x \|\| 4\.x
- 首次发布：2024-02-23T21:32:00.415Z
- 最新版本发布：2024-02-23T21:32:00.751Z
- 近 30 天下载量：2980464（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：1（近 12 个月 0 个）

## 中文简介

[![NPM Version](https://img.shields.io/npm/v/rollup-plugin-visualizer.svg)](https://npmjs.org/package/rollup-plugin-visualizer) \[![Node.js CI](https://github.com/btd/rollup-plugin-visualizer/actions/workflows/node.js.yml/badge.svg)\[(\][https://github.com/btd (中文(简体) )](https://github.com/btd)

## 安装

```sh
npm install @aklinker1/rollup-plugin-visualizer
```

也可以使用：`pnpm add @aklinker1/rollup-plugin-visualizer`、`yarn add @aklinker1/rollup-plugin-visualizer`、`bun add @aklinker1/rollup-plugin-visualizer`

## README

# 滚动插件可视化器

[![NPM Version](https://img.shields.io/npm/v/rollup-plugin-visualizer.svg)](https://npmjs.org/package/rollup-plugin-visualizer) [![Node.js CI](https://github.com/btd/rollup-plugin-visualizer/actions/workflows/node.js.yml/badge.svg)](https://github.com/btd/rollup-plugin-visualizer/actions/workflows/node.js.yml)

可视化分析您的滚滚捆,看看哪些模块占据了空间.

## 截图

![pic](https://github.com/btd/rollup-plugin-visualizer/blob/master/pics/collage.png?raw=true)

## 安装

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

或通过纱线:

```sh
yarn add --dev rollup-plugin-visualizer
```

## 使用量

导入

```javascript
// es
import { visualizer } from "rollup-plugin-visualizer";
// or
// cjs
const { visualizer } = require("rollup-plugin-visualizer");
```

采用卷起式(rollup.config.js)

```js
module.exports = {
  plugins: [
    // put it the last one
    visualizer(),
  ],
};
```

使用 vite (vite.config.js) 的词源

```js
module.exports = {
  plugins: [visualizer()],
};
```

使用 Vite 类型脚本( vite. config.ts)

```ts
import { defineConfig, type PluginOption } from 'vite'
export default defineConfig({
  plugins: [visualizer() as PluginOption],
})
```

与 SvelteKit (vite.config.js) 的用法

```js
const config = {
  plugins: [
    visualizer({
      emitFile: true,
      filename: "stats.html",
    }),
  ],
};

export default config;
```

您将在 . svelte- kit/ output dir 中找到2/3 文件, 命名为 stats.html( 文件位置请参见 vite 日志) 。 您可以使用这个片段作为起点并更改道具/路径. 也可以生成出3个json文件,并把它们与cli util合并为一.

## 如何使用生成的文件

用于标记项目所有文件的蓝色颜色 。 这可能是: 由您编写文件或由构建工具文件生成 .

绿色用来标记你的依赖.

内部它只是检查文件 id 前缀是否 `node_modules`。 。 。 .

所有图表在窗口调整大小时刷新布局 .

### 太阳爆发

这个圆形分层图可以帮助你找到巨大的代码(一个巨大的东西). 如果你点击一些弧,它会增加它的和所有嵌入弧的大小,以便更好地检查.

### 树图

这个长方形分级图可以帮助您找到巨大的块. 只是看看最大的反转。 但也可以帮助您找到包含多次的模块,它们具有相同的地貌和相对大小. 点击后会增加体积以供进一步检查.

### 网络

这个字节应该可以帮助您回答“为什么包括这个字节?” 武力布局稳定了所有节点后,可以通过拖动鼠标来前后移动. 灰色的圆圈被树 关闭文件.

在现实生活中,有时你会看到非常相连的图表。 没有百分之百的解决方案可以让每个人使用, 要使它仍然具有可视性,首先去除所看到的所有高度连接的节点(典型的例子:commonjshelpers,tslib, react等),基本上如果节点的工具提示没有被屏幕所持有——排除这个节点),在布局稳定后,你会看到,你的布局不再是那么可怕了,大多数依赖集群在一起. 移动布局以找到您寻找的棋子 .

当点击节点时, 它将会在工具提示( 导入当前节点的文件) 中列出高亮节点 .

### 原始数据

本模板以原始数据生成JSON输出. 通常应该从此插件中与 CLI 一起使用 .

### 列表

输出所有数据的 yml 文件, 可能是一个好主意 .

## 选项

`filename` (字符串,默认) `stats.{ext depending template}`) - 带有图生成的文件名称

`title` (字符串,默认) `Rollup Visualizer`) - 标题标签值

`open` (布尔,默认) `false`) - 在默认用户代理中打开生成的文件

`template` (字符串,默认) `treemap`) - 要使用的图类型: `sunburst`, (中文(简体) ), `treemap`, (中文(简体) ), `network`, (中文(简体) ), `raw-data`, (中文(简体) ), `list`。 。 。 .

`gzipSize` (布尔,默认) `false`) - 从源代码中收集gzip大小,并在图表中显示.

`brotliSize` (布尔,默认) `false`) - 从源代码中收集溴化物大小,并在图表中显示.

### 高级选项( 只有在您真的需要时才会触摸) :

`emitFile` (布尔,默认) `false`\- 使用卷轴 `emitFile` 生成文件。 如果您想要在一个地方控制所有输出( 通过滚动输出选项) , 则有用 。 这对丝绒也是有用的,因为它多次叫"花生".

`sourcemap` (布尔,默认) `false`) - 使用源图来计算大小(例如UglifyJs或Terser后). **总是将插件添加为最后一个选项 .**

`projectRoot` (字符串 \\\\ regExp,默认) `process.cwd()`) - 这是您文件的一些常见的根路径 。 用于切出绝对文件路径 .

`include` (Filter QQ过滤器\[\],默认) `undefined`) - 包含过滤器

`exclude` (Filter QQ过滤器\[\],默认) `undefined`\- 排除过滤器

`Filter` 类型是 `{ bundle?: picomatchPattern, file?: picomatchPattern }`

**说明 `include` 财务报告和审定财务报表 `exclude`** - 如果可以的话 包含被省略或有零长度,过滤器默认会返回真。 否则,一个ID必须匹配一个或多个比克图案,并且不得匹配任何选项. 排除规律。 此条目将完全不包含在统计数据中 .

#### 包含和排除

包含并排除过滤器使用有比克的光标匹配器. 在UI中,您可以进行这种组合(同时排除和包括):

-   在一个字符串中过滤捆绑和文件
    -   `translation-*.js:*/**/index.js` - 选择匹配的所有捆绑 `translation-*.js` 和所有路径的所有文件名称 `index.js`。 。 。 . `:` 是分隔符,仅在使用捆绑搜索时才需要.
    -   这类过滤器的格式是 `BUNDLE_GLOB:FILE_GLOB`
-   在一个字符串中过滤捆绑
    -   这是捆绑+文件过滤器的特例, 您需要省略 `FILE_GLOB` 部件( 空字符串)
-   在一个字符串中过滤文件
    -   **这是 DEFAULT 搜索选项**
    -   `*/**/index.js` - 选择所有名为索引.js的文件

## 国 际

此插件提供了 cli util `rollup-plugin-visualizer`添加 `--help` 以检查实际选项。 可以使用如下:

```sh
rollup-plugin-visualizer [OPTIONS] stat1.json stat2.json ../stat3.json
```

如果您在同一工程中拥有不同的配置文件, 并且您想要在同一个图表中显示所有配置文件, 这将会有用 .

## 构建插件

对于开发, 如果您需要构建插件, 只需执行 :

```js
npm run build
```

## 关于生成文件的免责声明

生成的 html 文件不会也永远不会包含您的源代码( 文件的内容) 。 它们只能包含构建图表(plugin代码)所需的js/html/css代码和关于您源代码的统计资料.

这种统计资料可包括:

-   捆绑中包含的文件大小
-   源地图中包含的文件大小
-   文件的路径
-   文件等级( 文件的fs树)

## 升级

见Changelog.md.

## 版本

-   插件后端( 一个在配置中出现) 严格遵循 SemVer
-   插件前端( 生成的文件) :
    -   `network`, (中文(简体) ), `treemap`, (中文(简体) ), `sunburst` 可更改的版本无关紧要(颜色、文本、视觉结构等)
    -   `raw-data` 格式遵循自己的 `version` 属性
    -   `list` 随取出

## 常见问题

### @aklinker1/rollup-plugin-visualizer 是什么？

\[\[\(\]https://github\.com/btd \(中文\(简体\) \)

### 如何安装 @aklinker1/rollup-plugin-visualizer？

在项目目录运行 npm install @aklinker1/rollup-plugin-visualizer，或使用 pnpm add / yarn add / bun add。它还提供命令行工具 rollup-plugin-visualizer，可以用 npx rollup-plugin-visualizer 直接运行。

### @aklinker1/rollup-plugin-visualizer 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @aklinker1/rollup-plugin-visualizer 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @aklinker1/rollup-plugin-visualizer 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=14。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @aklinker1/rollup-plugin-visualizer 可以商用吗？

@aklinker1/rollup-plugin-visualizer 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @aklinker1/rollup-plugin-visualizer 的下载量有多少？

根据 npm 官方下载统计，@aklinker1/rollup-plugin-visualizer 在 2026/10/06 – 2026/11/04 这 30 天内被下载 2,980,464 次，日均约 99,349 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @aklinker1/rollup-plugin-visualizer 还在维护吗？

最新版本 5\.12\.0 发布于 2024/02/24（2 年前）；至今共发布 1 个版本，其中过去 12 个月发布了 0 个；首次发布于 2024/02/24。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。