vite打包分析插件rollup-plugin-visualizer

原创 已于 2022-11-17 20:40:05 修改 · 3.5k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #vue.js

于 2022-11-17 20:39:58 首次发布
本文介绍如何通过安装和配置rollup-plugin-visualizer插件来实现Vite项目的性能分析。主要包括插件的安装步骤、在vite.config.ts中引入及使用插件的方法，以及最终生成的stats.html文件用以展示打包后的资源占用情况。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、安装插件

pnpm install rollup-plugin-visualizer

2、在vite.confg.ts引入插件并使用

引入

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

使用

const plugins = [vue(), vueSetupExtend(), vueJsx(), visualizer()]

3、打包后，会产生一个stats.html文件
在这里插入图片描述

vite打包大小可视化rollup-plugin-visualizer
solocao的专栏
04-12 1350
在 Vite 项目中使用 rollup-plugin-visualizer 插件可以可视化分析打包后的文件大小。当运行打包命令后，会生成一个名为 stats.html 的文件，可以在浏览器中打开该文件来查看可视化的打包分析报告。在上面的配置中，filename 参数指定生成的可视化分析报告的文件路径，title 参数指定报告的标题。
uniapp: vite配置rollup-plugin-visualizer进行小程序依赖可视化分析减少vender.js大小
q1003675852的博客
11-16 1806
本文主要记录uniapp: vite配置rollup-plugin-visualizer进行小程序依赖可视化分析减少vender.js大小
vite打包可视化工具rollup-plugin-visualizer图文教程
xuelang532777032的博客
07-11 3314
举个例子，你的项目引用了jquery@2.1,的依赖，而你npm instal的第三方插件引用了jquery@2.2，这样你vite可能会将两个jquery版本依赖都打包进去。你体积就变大了，这个插件就是方便你查看打包后，有哪些依赖。2、vite.config.ts 配置。1、github地址==》中文翻译看博文头部的序中第二点。配置中文翻译文档，关注公众号“
打包体积分析插件 vue3 (vite) ——rollup-plugin-visualizer，webpack——webpack-bundle-analyzer
最新发布
HarryHY的博客
05-15 720
使用打包工具在帮我门分析打包结果进而来做优化在用vite打包是通过rollup来完成的。
rollup-plugin-visualizer 打包体积分析插件 【vue3+vite 项目性能优化插件】
weixin_43383840的博客
06-01 2654
打包体积分析插件rollup-plugin-visual
rollup-plugin-visualizer 打包体积分析插件（vue+vite）
farmerXU的博客
06-26 615
打包之后就能看到分析图了。
vue3+Ts+vite 打包体积分析插件 rollup-plugin-visualizer
weixin_50961467的博客
04-04 1255
官方地址：https://github.com/btd/rollup-plugin-visualizer。
vue3+ts+vite项目打包生成可视化报告（rollup-plugin-visualizer）
徐同保的专栏
06-24 489
vue3+ts+vite项目打包生成可视化报告（rollup-plugin-visualizer）
vue3+vite+ts+element-plus+rollup-plugin-external-globals+vite-plugin-html，提高打包速度，提高网页打开速度
徐同保的专栏
07-22 540
vue3+vite+ts+element-plus+rollup-plugin-external-globals+vite-plugin-html，提高打包速度，提高网页打开速度
rollup-plugin-visualizer工具分享
Jinuss的博客
08-27 1786
基于rollup.js的模块分析工具
rollup-plugin-visualizer::chart_increasing::balance_scale:可视化您的捆绑包
04-02
汇总插件可视化器 可视化并分析您的Rollup捆绑包，以查看哪些模块占用了空间。 屏幕截图 安装 npm install --save-dev rollup-plugin-visualizer 或通过纱线： yarn add --dev rollup-plugin-visualizer V5升级 V5版包含一些重大的重大更改，具体取决于您当前的安装采取以下步骤进行升级： 如果您使用汇总v1.x，则最好保留插件v4。 我自己正式停止了对rolloup的支持v1。 1.x的某些版本可以正常使用，但是我停止测试自己或在此方向上进行任何更改。 如果有人想朝这个方向前进-欢迎光临。 如果您使用汇总v2.x并至少使用gzipLength或brotliLength升级到汇总2.44。 在V5中，我使用汇总API提供的功能来获取渲染的模块代码以进行大小估算，而不是像以前那样使用原始资源。 在所
vite-plugin-resolve-externals:vite插件解析外部
03-04
vite-plugin-resolve-externals vite插件解析外部 用法 安装 npm i -D vite-plugin-resolve-externals 通过参数传输使用支持设置，还支持在解析中配置外部项目 // vite.config.js const resolveExternalsPlugin = require ( 'vite-plugin-resolve-externals' ) ; const projectRootDir = path . resolve ( __dirname ) ; // https://vitejs.dev/config/ export default defineConfig ( { plugins : [ // It can be configured here resolveExternalsPlugin
webpack-dashboard打包可视化插件
12-27
webpack是目前前端主流打包框架，打包界面比较原始，可读性不强，使用webpack-dashboard插件打包可以使打包界面可视化，就像是nasa工作人员在工作时的界面。
【vite+vue3.2 项目性能优化实战】打包体积分析插件rollup-plugin-visualizer视图分析
白洞，白色的明天在等着我们
05-06 4418
是一个用于Rollup构建工具的插件，它可以生成可视化的构建报告，帮助开发者更好地了解构建过程中的文件大小、依赖关系等信息。使用插件，可以在构建完成后生成一个交互式的HTML报告，其中包含了构建过程中的各种统计信息，如文件大小、依赖关系、模块数量等。它提供了多种模式的依赖分析，包括直观的视图分析，sunburst（循环层次图，像光谱）、treemap（矩形层次图，看起来比较直观，也是默认参数）、network（网格图，查看包含关系）、raw-data（原数据模式，json格式）, list(列表模式),
【rollup-plugin-visualizer】vite项目打包大小可视化
毛毛的博客
10-23 541
在vite项目中，如何可视化的查看项目的包体积呢，打包后，针对包进行针对性优化，保证项目的合适大小。在defineConfig中的plugin插入。具体命令根据项目实际情况。
vite3+vue3 项目打包优化实战之-视图分析（rollup-plugin-visualizer）、CDN引入、依赖分包、gzip压缩、history404问题
热门推荐
潜心
10-22 1万+
vue项目在线下环境开发完成后，我们就需要项目的打包上线了，除了要知道打包命令之外，我们还要知道项目整体文件依赖情况，web访问加载速度等概念，包括首屏优化方案。我通过一次实战把最基本可以优化的步骤走一下。build 视图分析依赖文件第三方库CDN引入依赖文件分包gzip压缩文件部署前配置history路由模式的404问题📚vite专栏☃️ 个人简介：一个喜爱技术的人。🌞 励志格言: 脚踏实地，虚心学习。
【亲测免费】 Rollup Plugin Visualizer: 构建你的模块依赖可视化利器
gitblog_00066的博客
03-24 1524
Rollup Plugin Visualizer: 构建你的模块依赖可视化利器 是一个强大且直观的工具，用于帮助开发者在使用 Rollup 打包时，生成详细的模块依赖图谱。通过可视化的方式，你可以清晰地理解代码的打包结构和优化潜在点，从而更高效地管理和优化你的 JavaScript 应用程序。 项目简介 Rollup 是一款优秀的 JavaScript 模块打包器，以其高效的树摇（Tree Sha...
Rollup-plugin-Visualizer 开源项目指南
gitblog_00147的博客
08-09 386
Rollup-plugin-Visualizer 开源项目指南 目录结构及介绍 在首次克隆rollup-plugin-visualizer仓库后,你会看到以下主要目录: src/ 这是核心源码的存放位置.所有关于插件的功能实现都在此目录下的文件中. test/ 测试案例和测试脚本在这里可以找到.这些是验证插件功能是否按预期工作的重要组成部分. examples/ 这里是演示如何实际应用插件的例子....
Rollup-plugin-bundle-analyzer VS Rollup-plugin-visualizer
杨晓风 迷迭香的记忆
01-09 901
总的来说，Rollup-plugin-bundle-analyzer和Rollup-plugin-visualizer都是用于分析和可视化Rollup打包后文件的插件，但Rollup-plugin-visualizer提供了更多的可视化选项和观察模式，而Rollup-plugin-bundle-analyzer则更注重分析包中各个模块的占比。Rollup-plugin-bundle-analyzer是一个用于分析Rollup包中各个模块占比的插件。分析和可视化Rollup打包后的文件的插件。
vue2 rollup-plugin-visualizer
02-27
### 使用 `rollup-plugin-visualizer` 进行 Vue2 项目的打包分析 #### 安装依赖 为了在 Vue2 项目中集成并使用 `rollup-plugin-visualizer` 来进行打包分析，需先通过 npm 或 yarn 安装该插件。命令如下所示： ```bash npm install rollup-plugin-visualizer --save-dev ``` 此操作会更新 `package.json` 文件中的开发依赖项列表[^1]。 #### 配置 Rollup 构建工具 对于基于 Rollup 的构建流程，在配置文件（通常是 `rollup.config.js`）内引入 `visualizer` 并将其加入到插件数组里: ```javascript // rollup.config.js import visualizer from 'rollup-plugin-visualizer'; export default { input: 'src/main.js', output: { file: 'dist/bundle.js', format: 'iife' }, plugins: [ // ...其他插件, visualizer() // 添加 visualizer 插件用于生成报告 ] }; ``` 如果当前使用的不是纯 Rollup 而是 Vite，则应在 vite 配置文件 (`vite.config.ts`) 中做相应调整[^2]: ```typescript // vite.config.ts import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; // 假设正在使用 @vitejs/plugin-vue 支持 .vue 单文件组件解析 import { visualizer } from 'rollup-plugin-visualizer'; export default defineConfig({ plugins: [ vue(), visualizer() ], }); ``` 值得注意的是，当处理 Vue2 特定环境时，可能还需要额外安装与之兼容的版本或相关适配器来确保一切正常工作[^4]。 完成上述设置之后，执行构建过程即可触发 `visualizer` 自动生成可视化报表帮助理解最终包的内容结构及其大小分布情况[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值