4
需要安装的包
pnpm add -D unplugin-vue-components/vite
pnpm add -D unplugin-vue-components/resolvers
pnpm add -D vite-plugin-compression
配置 ant design vue 按需导入
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
plugins: [
Components({
resolvers: [AntDesignVueResolver()]
}),
]
})
开启gzip压缩
import commpressPlugin from 'vite-plugin-compression'
export default defineConfig({
plugins: [
commpressPlugin({
verbose: true, // 默认即可
disable: false, //开启压缩(不禁用),默认即可
deleteOriginFile: false, //删除源文件
threshold: 10240, //压缩前最小文件大小
algorithm: 'gzip', //压缩算法
ext: '.gz' //文件类型
})
})
nginx 开启gzip
# 开启gzip
gzip on;
# 启用gzip压缩的最小文件,小于设置值的文件将不会压缩
gzip_min_length 1k;
# gzip 压缩级别,1-9,数字越大压缩的越好,也越占用CPU时间,后面会有详细说明
gzip_comp_level 1;
# 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;
# 是否在http header中添加Vary: Accept-Encoding,建议开启
gzip_vary on;
# 禁用IE 6 gzip
gzip_disable "MSIE [1-6]\.";
# 设置压缩所需要的缓冲区大小
gzip_buffers 32 4k;
去除console log
esbuild: {
pure: ['console.log'],
minify: true
},
vite.config.ts 全部代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
import commpressPlugin from 'vite-plugin-compression'
// https://vitejs.dev/config/
export default defineConfig({
css: {
preprocessorOptions: {
less: {
modifyVars: {
// 此处也可设置直角、边框色、字体大小等
'primary-color': '#6768aa',
'border-color-base': '#6768aa'
// 'border-radius-base': '10px',
},
javascriptEnabled: true
}
}
},
plugins: [
vue(),
Components({
resolvers: [AntDesignVueResolver()]
}),
commpressPlugin({
verbose: true, // 默认即可
disable: false, //开启压缩(不禁用),默认即可
deleteOriginFile: false, //删除源文件
threshold: 10240, //压缩前最小文件大小
algorithm: 'gzip', //压缩算法
ext: '.gz' //文件类型
})
],
resolve: {
alias: {
'@': resolve(__dirname, 'src')
}
},
esbuild: {
pure: ['console.log'],
minify: true
},
build: {
// chunkSizeWarningLimit: 1000,
rollupOptions: {
output: {
chunkFileNames: 'assets/js/[name]-[hash].js',
entryFileNames: 'assets/js/[name]-[hash].js',
assetFileNames: 'assets/[ext]/[name]-[hash].[ext]'
// manualChunks(id) {
// if (id.includes('node_modules')) {
// return id
// .toString()
// .split('node_modules/')[1]
// .split('/')[0]
// .toString()
// }
// }
}
}
}
})