Vite:rollup-plugin-visualizer查看打包体积分析report报告

简介: Vite:rollup-plugin-visualizer查看打包体积分析report报告

安装依赖

pnpm i rollup-plugin-visualizer -D

配置

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { visualizer } from 'rollup-plugin-visualizer'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      plugins: [visualizer()]
    },
  }
})

打包之后会生成一个文件stats.html

image.png

参考


相关文章
|
6月前
|
JSON JavaScript 数据格式
NPM 发包 js 文件并支持 ts 使用(包含 gulp 打包压缩)
NPM 发包 js 文件并支持 ts 使用(包含 gulp 打包压缩)
124 0
|
3月前
|
JSON 前端开发 算法
vite打包优化vite-plugin-compression的使用
【8月更文挑战第4天】vite打包优化vite-plugin-compression的使用
430 4
|
5月前
|
JavaScript 中间件
|
4月前
|
JavaScript 开发工具 git
使用TS+rollup打造一个npm工具库
使用TS+rollup打造一个npm工具库
157 0
|
5月前
|
JavaScript 开发工具 git
大事件项目62------打包发布_dist瘦身
大事件项目62------打包发布_dist瘦身
|
6月前
|
缓存 前端开发 JavaScript
Vite 打包优化:全面解析与实践
Vite 作为新一代前端构建工具,以其快速开发体验和高效打包能力著称。然而,在实际项目开发中,为了进一步提升性能和用户体验,我们仍需对 Vite 打包进行优化。本文将深入探讨 Vite 打包优化策略,涵盖代码拆分、资源压缩、缓存利用、构建配置等多个方面,并提供实践案例和最佳实践建议,帮助开发者充分释放 Vite 的潜力。
1628 1
|
缓存 JavaScript CDN
关于vite打包优化,你了解多少
关于vite打包优化,你了解多少
|
Web App开发 缓存 前端开发
|
JavaScript 前端开发 API
Vite 是如何使用 Rollup 进行构建的
Vite 是如何使用 Rollup 进行构建的
328 0
|
缓存 JavaScript 前端开发
umi工程的打包优化
在SPA应用中,随着项目的推进,功能不断增加,代码量也随之日益增长,导致打包内容也变得更加臃肿,首屏加载慢,部分功能复杂的页面渲染慢,这个时候需要对打包内容进行优化调整。
5240 2