一、可视化和分析Rollup包
- rollup-plugin-visualizer
- 一款可视化和分析Rollup包，查看哪些模块占用了空间。
npm install --save-dev rollup-plugin-visualizer
import { defineConfig } from "vite"
import { visualizer } from "rollup-plugin-visualizer"
export default defineConfig({
plugins: [
visualizer({
open: true,
gzipSize: true,
})
],
})
二、使用gzip或brotli压缩资源
- vite-plugin-compression
- 一个开启gzip或者brotli压缩资源插件
npm i vite-plugin-compression -Dalgorithm：压缩算法,可选 [ ‘gzip’ , ‘brotliCompress’ ,‘deflate’ , ‘deflateRaw’]
import viteCompression from 'vite-plugin-compression';
export default () => {
return {
plugins: [
viteCompression({
deleteOriginFile: false,
algorithm: "gzip",
}),
],
};
};
三、打包构建优化配置
import { defineConfig } from "vite"
export default defineConfig({
build: {
rollupOptions: {
output: {
manualChunks: {
react: ["react", "react-router-dom"],
echarts: ["echarts"],
lodash: ["lodash"],
antd: ["antd"],
moment: ["moment"],
ahooks: ["ahooks"],
reactJss: ["react-jss"],
exceljs: ["exceljs"],
html2canvas: ["html2canvas"],
},
},
},
},
})
- 构建后目录
四、为生产版本提供遗留浏览器支持
- @vitejs/plugin-legacy
- 一款为生产版本提供遗留浏览器支持插件
- 必须安装Terser，因为遗留插件使用Terser来缩小。
npm add -D terser @vitejs/plugin-legacy
import legacy from '@vitejs/plugin-legacy'
export default {
plugins: [
legacy({
targets: ['defaults', 'not IE 11']
})
]
}
