打包优化

直接上代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import viteCompression from 'vite-plugin-compression';
import { visualizer } from 'rollup-plugin-visualizer';
import path from 'path'
// https://vite.dev/config/
export default defineConfig({
plugins: [
vue(),
viteCompression({
verbose: true,
disable: false,
threshold: 10240,
algorithm: 'gzip',
ext: '.gz'
}),
visualizer({ open: true, gzipSize: true, brotliSize: true, filename: 'stats.html' })
],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'), // 配置@路径别名
},
},
build: {
rollupOptions: {
output: {
manualChunks(id) {
if (id.includes('node_modules')) {
return 'vendor';
}
}
}
}
}
})

坑又来了，path和__dirname ts不认，需要下载依赖npm install @types/node --save-dev

build以后发现element-plus太占地方了，所以还是决定用CDN。
首先添加环境变量，.env.development，.env.production两个文件，分别设置VITE_APP_NAME=DEVELOPMENT，VITE_APP_NAME=PRODUCTION，
index.html

main.ts判断环境变量
if(import.meta.env.VITE_APP_NAME == 'DEVELOPMENT') {
createApp(App).use(ElementPlus)
}

其他优化方式请参考https://www.cnblogs.com/chen0509/p/18420189、https://www.cnblogs.com/chen0509/p/18419990