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 打包压缩)
125 0
|
3月前
|
JSON 前端开发 算法
vite打包优化vite-plugin-compression的使用
【8月更文挑战第4天】vite打包优化vite-plugin-compression的使用
457 4
|
4月前
|
JavaScript 开发工具 git
使用TS+rollup打造一个npm工具库
使用TS+rollup打造一个npm工具库
171 0
|
5月前
|
JavaScript 开发工具 git
大事件项目62------打包发布_dist瘦身
大事件项目62------打包发布_dist瘦身
|
Web App开发 XML 资源调度
Vue 打包 chunk-vendors.js 文件过大解决方案(compression-webpack-plugin)
Vue 打包 chunk-vendors.js 文件过大解决方案(compression-webpack-plugin)
859 1
|
缓存 JavaScript CDN
关于vite打包优化,你了解多少
关于vite打包优化,你了解多少
vite2 打包的时候vendor-xxx.js文件过大的解决方法
vite2是一个非常好用的工具,只是随着代码的增多,打包的时候 vendor-xxxxxx.js 文件也越来越大,这就郁闷了。
389 0
|
Web App开发 缓存 前端开发
|
缓存 JSON Rust
|
缓存 JavaScript 前端开发
umi工程的打包优化
在SPA应用中,随着项目的推进,功能不断增加,代码量也随之日益增长,导致打包内容也变得更加臃肿,首屏加载慢,部分功能复杂的页面渲染慢,这个时候需要对打包内容进行优化调整。
5255 2