vite项目打包优化

一、可视化打包插件,可以查看每个打包文件的体积，依赖关系
1、安装 npm i rollup-plugin-visuallizer
2、在vite.config.js里面配置
import { visualizer } from ‘rollup-plugin-visualizer’
export default defineConfig({
plugins:[
visualizer({ //可视化
open:true,
gzipSize: true, // 分析图生成的文件名
brotliSize: true, // 收集 brotli 大小并将其显示
filename: “stats.html”, // 分析图生成的文件名
})
]
})

二、对大的js和css压缩为gzip（提升页面加载速度）
1、安装 npm i vite-plugin-compression
2、在vite.config.js里面配置
import viteCompression from ‘vite-plugin-compression’
export default defineConfig({
plugins:[
visualizer({ //可视化
open:true
}),
//大文件打包成gzip
viteCompression({
verbose:true, //控制台输出压缩结果
disable:false,//开启还是禁用
threshold:1024, //体积大于1024的设置压缩
algorithm:‘gzip’ , //压缩算法
ext: ‘.gz’ //文件后缀名
})

     ]

})