一.插件安装
gzip
静态资源压缩插件安装
npm i vite-plugin-compression -D
使用
import viteCompression from 'vite-plugin-compression'
plugins: [
........
viteCompression({
verbose: true,
disable: false,
threshold: 10240,
algorithm: 'gzip',
ext: '.gz',
})],
IE和旧版chrome兼容
npm i @vitejs/plugin-legacy -D
使用
import legacyPlugin from '@vitejs/plugin-legacy'
plugins: [
.........
legacyPlugin({
targets: ['chrome 52'],
additionalLegacyPolyfills: ['regenerator-runtime/runtime']
})],
二.其他配置
文件分类
build: {
rollupOptions: {
output: {
chunkFileNames: 'static/js/[name]-[hash].js',
entryFileNames: 'static/js/[name]-[hash].js',
assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
}
}
}
提高超大静态资源警告门槛
build:{
.......
chunkSizeWarningLimit: 1500,
}
超大静态资源拆分
build:{
.......
output: {
.....
manualChunks(id) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString();
}
}
}
}
清楚IE和旧版chrome兼容
build:{
......
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true,
},
},
}
使用hash路由路径
import { createRouter,createWebHashHistory } from "vue-router";
const router = createRouter({
history: createWebHashHistory(),
routes,
});
三.案例
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import Components from "unplugin-vue-components/vite";
import AutoImport from "unplugin-auto-import/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import viteCompression from "vite-plugin-compression";
import legacyPlugin from "@vitejs/plugin-legacy";
export default defineConfig({
base: "./",
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
viteCompression({
verbose: true,
disable: false,
threshold: 10240,
algorithm: "gzip",
ext: ".gz",
}),
legacyPlugin({
targets: ["chrome 52"],
additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
}),
],
build: {
minify: 'terser',
chunkSizeWarningLimit: 1500,
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true,
},
},
chunkSizeWarningLimit: 1500,
rollupOptions: {
output: {
chunkFileNames: "static/js/[name]-[hash].js",
entryFileNames: "static/js/[name]-[hash].js",
assetFileNames: "static/[ext]/[name]-[hash].[ext]",
manualChunks(id) {
if (id.includes("node_modules")) {
return id
.toString()
.split("node_modules/")[1]
.split("/")[0]
.toString();
}
},
},
},
},
});