Vite打包优化
下载rollup-plugin-visualizer打包体积可视化面板
yarn add rollup-plugin-visualizer -D
js
//vite.config.ts
import { defineConfig } from 'vite'
import { visualizer } from 'rollup-plugin-visualizer';
export default defineConfig({
plugins:[visualizer({open:true})]//配置打包后自动打开可视化面板
})
配置cdn方法
yarn add vite-plugin-cdn-import -D
一定要注意cdn版本号和当前项目依赖版本号是否一致
js
import { defineConfig } from 'vite'
import { Plugin as importToCDN } from "vite-plugin-cdn-import";
export default defineConfig({
plugins:[importToCDN({
modules: [
{
name: "vue",
var: "Vue",
path: "cdn-link"//cdn链接
},
{
name: "vue-router",
var: "VueRouter",
path: "cdn-link"//cdn链接
},
{
name: "axios",
var: "Axios",
path: "cdn-link"//cdn链接
}
]
})]
})
gzip静态资源压缩
yarn add vite-plugin-compression -D
js
import viteCompression from 'vite-plugin-compression'
//在plugins配置数组里添加gzip插件
plugins: [viteCompression({
verbose: true,
disable: false,
threshold: 10240,
algorithm: 'gzip',
ext: '.gz',
})],
清除console和debugger
先安装yarn add -D terser 在build里面添加
terse
js
build : {
minify : 'terser' ,
terserOptions : {
compress : {
drop_console : true ,
drop_debugger : true ,
} ,
} ,
} ,