Vite打包 - 打包体积可视化面板

最新推荐文章于 2025-09-19 11:49:26 发布

原创

最新推荐文章于 2025-09-19 11:49:26 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

本文介绍了如何在Vite项目中集成并使用rollup-plugin-visualizer插件，实现打包体积的可视化分析。通过npm安装插件后，在vite.config.js中配置并启用，最后运行打包命令，即可在浏览器中查看详细的体积报告，帮助优化项目构建大小。

1.Vite打包 - 打包体积可视化面板

首先我们下载对应的插件

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

其次在 vite.config.js中配置，和使用这个插件

import {
   
    visualizer } from 'rollup-plugin-visualizer';
export default defineConfig({
   
   
	plugins:

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小秧@

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

前台后台-vite打包配置

hktkkkk的博客

03-31

1395

vue文件无需再手动导入。

vite打包可视化工具rollup-plugin-visualizer图文教程

xuelang532777032的博客

07-11

3485

举个例子，你的项目引用了jquery@2.1,的依赖，而你npm instal的第三方插件引用了jquery@2.2，这样你vite可能会将两个jquery版本依赖都打包进去。你体积就变大了，这个插件就是方便你查看打包后，有哪些依赖。2、vite.config.ts 配置。1、github地址==》中文翻译看博文头部的序中第二点。配置中文翻译文档，关注公众号“

2 条评论您还未登录，请先登录后发表或查看评论

2 条评论

qq_45033653 2023.09.20
visualizer({open: true})

vue3+ts+vite项目打包生成可视化报告（rollup-plugin-visualizer）

徐同保的专栏

06-24

589

vue3+ts+vite项目打包生成可视化报告（rollup-plugin-visualizer）

Vite打包优化实践：从分包到性能提升

热门推荐

程序员秋风的博客

10-19

1万+

其实这个问题最好改成 rollup 打包体积分析，但是为什么我会取这个名字呢？其实这主要是由于我的习惯性引起的，因为太久没用一个东西，如果遇到问题，肯定会去围绕它自身去进行搜索。例如遇到 vite 打包分析相关问题，就会在 google 搜索，vite build analyzer 然后就打开第一个 issues。然后才反应过来，哦，怎么把 vite 是用 rollup 打包给忘记了呢。这也许会被有些读者嘲讽，“Vite 用 rollup 打包，这都不会？”，但是对于这部分户读者，我想提个问题，高

vite配置cdn优化打包体积

m0_68324632的博客

09-13

1万+

大家都知道前端性能优化的方法，cdn外部引入的方法可以使项目打包后体积大大缩小，所以是前端性能优化方面非常推荐的方法之一。本文关于项目如何cdn引入做一个简单教程，我们可以通过两种方式引入配置cdn。由于vite的核心基于rollup和webpack不同，所以cdn引入方式也不同具体rollup配置项可以阅读vite官网。rolluppluginsexternalvite这次带来了两种方法打包Element plus ，同样的只要有cdn链接，我们就可以用这两种方式进行引入。

基于Electron与Quasar的前端高效开发可视化工具

同时，Vite 对 TypeScript、JSX、CSS 预处理器（Sass/Less/Stylus）有开箱即用的支持，结合 Rollup 实现高效的生产构建输出，确保最终打包体积小、性能优。在本项目中，Vite 很可能被配置为 Quasar 项目的底层构建...

Vue3+Echarts大屏数据可视化性能优化方案

同时，Vue 3原生支持Tree-shaking，能够有效剔除未使用的模块代码，减小打包体积，这对于部署在公网环境或嵌入式设备上的大屏应用尤为关键。其次，文档深入剖析了Vue 3的核心优势之一——Composition API。相较于...

gitblog_00049的博客

06-01

1440

Node.JS+Vue+Vite+D3可视化

jiu_jio的博客

05-17

521

NodeJS 简单的说 Node.js 就是运行在服务端的 JavaScript。下载网址：http://nodejs.cn/download/ 查看版本：node --version 写文件server.js，试运行： var http = require('http'); http.createServer(function (request, response){ // 发送HTTP头部 // HTTP状态值：200：OK // 内容类型：text/plain response.writ

React Vite 构建工具如何查看代码占用体积

weixin_72099243的博客

02-29

869

首先安装 Vite 中的 rollup-plugin-visualizer 插件。接着在你的 vite.config.ts 中引入并且使用到 plugins 中。接着进行打包，生成 dist 文件之后会自动为你打开页面进入查看，如下。

Vue3 + vite 打包后查看资源占比

Anyuegogogo的博客

02-24

622

Vue3 + vite 打包后查看资源占比，用 rollup-plugin-visualizer --save-dev插件来进行打包体积大小的分析

Vite Bundle Visualizer 使用教程

gitblog_00545的博客

08-21

1123

Vite Bundle Visualizer 使用教程 1. 项目的目录结构及介绍 Vite Bundle Visualizer 项目的目录结构如下： vite-bundle-visualizer/ ├── dist/ │ ├── assets/ │ └── index.html ├── public/ │ └── index.html ├── src/ │ ├── assets/...

vite项目打包优化

scsc11的博客

08-21

955

vite项目打包相关

【VUE3】Vite编译的打包输出dist包大小的小工具

weixin_51083890的博客

09-15

799

中秋节第一天，先卷一下，我优化了下一个项目模版，因为我的项目需要我从那个模版上复制出一个新的项目，那本着不折腾就难受的心态，我还是进行了优化，优化完成后我就想我为什么不能在编译后显示下我打出来的dist包的大小呢，所以就有了下方的小函数。今天算是入职了一家外包吧吧，行情不好，先找个过渡。然后引用到vite.config.ts。