【vite】vite打包优化：
import { fileURLToPath, URL } from 'node:url'
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
// 配置ElementPlus按需导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// 文件压缩
import viteCompression from 'vite-plugin-compression'
export default defineConfig(({ mode, command }) => {
const env = loadEnv(mode, process.cwd())
const { VITE_PUBLIC_PATH, } = env;
return {
base: VITE_PUBLIC_PATH,
plugins: [
vue(),
AutoImport({ resolvers: [ElementPlusResolver()] }),
Components({ resolvers: [ElementPlusResolver()] }),
// 配置ElementPlus采用sass样式配色系统{ importStyle: "sass" }
// Components({ resolvers: [ElementPlusResolver({ importStyle: "sass" })] }),
//在plugins配置数组里添加gzip插件
viteCompression({ verbose: true, disable: false, threshold: 10240, algorithm: 'gzip', ext: '.gz', }),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
'~@': fileURLToPath(new URL('./src', import.meta.url)),
},
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
},
build: {
target: 'es2015',
cssTarget: 'chrome80',
minify: "terser", // 必须开启：使用terserOptions才有效果
terserOptions: {
compress: {
keep_infinity: true, // 防止 Infinity 被压缩成 1/0，这可能会导致 Chrome 上的性能问题
drop_console: true, // 生产环境去除 console
drop_debugger: true // 生产环境去除 debugger
},
},
brotliSize: false, // 进行压缩计算
chunkSizeWarningLimit: 2000, // chunk 大小警告的限制（以 kbs 为单位）
rollupOptions: {
output: {// 分包
manualChunks(id) {
if (id.includes("node_modules")) { return id.toString().split("node_modules/")[1].split("/")[0].toString() }
},
},
},
},
css: {
preprocessorOptions: {
scss: {
// ElementPlus自动导入定制化样式文件进行样式覆盖 @use "@/assets/styles/" as *;
// 全局样式变量 @use "@/assets/styles/" as *;;
additionalData: `
@use "@/assets/styles/" as *;
`,
}
}
}
}
})