滚动插件可视化器
可视化分析您的滚滚捆,看看哪些模块占据了空间.
截图
安装
npm install --save-dev rollup-plugin-visualizer
或通过纱线:
yarn add --dev rollup-plugin-visualizer
使用量
导入
// es
import { visualizer } from "rollup-plugin-visualizer";
// or
// cjs
const { visualizer } = require("rollup-plugin-visualizer");
采用卷起式(rollup.config.js)
module.exports = {
plugins: [
// put it the last one
visualizer(),
],
};
使用 vite (vite.config.js) 的词源
module.exports = {
plugins: [visualizer()],
};
使用 Vite 类型脚本( vite. config.ts)
import { defineConfig, type PluginOption } from 'vite'
export default defineConfig({
plugins: [visualizer() as PluginOption],
})
与 SvelteKit (vite.config.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 以检查实际选项。 可以使用如下:
rollup-plugin-visualizer [OPTIONS] stat1.json stat2.json ../stat3.json
如果您在同一工程中拥有不同的配置文件, 并且您想要在同一个图表中显示所有配置文件, 这将会有用 .
构建插件
对于开发, 如果您需要构建插件, 只需执行 :
npm run build
关于生成文件的免责声明
生成的 html 文件不会也永远不会包含您的源代码( 文件的内容) 。 它们只能包含构建图表(plugin代码)所需的js/html/css代码和关于您源代码的统计资料.
这种统计资料可包括:
- 捆绑中包含的文件大小
- 源地图中包含的文件大小
- 文件的路径
- 文件等级( 文件的fs树)
升级
见Changelog.md.
版本
- 插件后端( 一个在配置中出现) 严格遵循 SemVer
- 插件前端( 生成的文件) :
network, (中文(简体) ),treemap, (中文(简体) ),sunburst可更改的版本无关紧要(颜色、文本、视觉结构等)raw-data格式遵循自己的version属性list随取出