vite packaging configuration and performance optimization
install plugin
First of all, you need to install the plug-in that should be installed.
These three are basic plug-ins, and other optimized plug-ins will be introduced below
"vite": "4.4.6",
"vite-plugin-html": "^3.2.0",
"@vitejs/plugin-vue": "^4.2.3",
vite.config.ts file
configuration
This is the most basic configuration, of course, it can go online, but there are still many places to be optimized
import {
resolve } from 'path';
import {
loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import {
createHtmlPlugin } from 'vite-plugin-html';
import type {
UserConfig, ConfigEnv } from 'vite';
function pathResolve(dir: string) {
return resolve(__dirname, '.', dir);
}
// https://vitejs.dev/config/
export default ({
mode }: ConfigEnv): UserConfig => {
const root = process.cwd();
const env = loadEnv(mode, root);
const {
VITE_APP_TITLE, VITE_OUT_DIR, VITE_PORT, VITE_PUBLIC_PATH, VITE_APP_PROXY } = env;
return {
base: VITE_PUBLIC_PATH,
resolve: {
alias: {
'/@': pathResolve('src'),
'/@views': pathResolve('src/views'),
'/@components': pathResolve('src/components'),
'/@types': pathResolve('src/types'),
},
},
server: {
open: true,
port: Number(VITE_PORT),
hmr: {
overlay: true,
},
proxy: {
'/api': {
target: VITE_APP_PROXY,
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
},
},
build: {
outDir: VITE_OUT_DIR,
sourcemap: true,
target: ['es2020'],
chunkSizeWarningLimit: 1000,
},
plugins: [
vue(),
createHtmlPlugin({
minify: mode === 'production',
inject: {
data: {
title: VITE_APP_TITLE,
},
},
}),
],
};
};
performance optimization
Performance optimization is nothing more than reducing the packaged volume; reducing http requests; accelerating rendering;
In fact, the following is just what I use, and there are more plug-ins. Refer to the official website: vite plug-in
I'll check the official website later, let me know if you find something good
rollup-plugin-visualizer
First install a plug-in for packaging volume analysis: rollup-plugin-visualizer, which will generate a stats.html file to display the size of each package dependency;
npm i rollup-plugin-visualizer -D
import {
visualizer } from 'rollup-plugin-visualizer'; //打包体积分析
plugins: [
visualizer({
open: true}),
],
vite-plugin-css-injected-by-js
Inject css into js files to effectively reduce http requests, but here the path of the background image in css will be wrong (no solution has been found so far), use selectively
npm i vite-plugin-css-injected-by-js -D
import {
visualizer } from 'rollup-plugin-visualizer'; //打包体积分析
plugins: [
visualizer(),
],
If the pro-test is available, it will not be repackaged for screenshots (effectively reducing http requests, but the path of the background image in css will be wrong here (no solution has been found yet))
Remove console, debugger
build: {
outDir: VITE_OUT_DIR,
sourcemap: true,
chunkSizeWarningLimit: 1000,
minify: 'terser', //压缩方式
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true,
},
},
},
CDN acceleration
Note that this is used for most projects, but it cannot be used for the b/s end without network connection
Note: To find a reliable and stable cdn connection, users must have a network
Here are two examples
plugins: [
vue(),
createHtmlPlugin({
minify: mode === 'production',
inject: {
data: {
title: VITE_APP_TITLE,
vuescript: '<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.0/vue.global.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.esm.js"></script>'
},
},
}),
],
Pay attention to the reference in the entry html
<head>
<%- vuescript %>
</head>
file compression vite-plugin-compression file compression
Here nginx should also be configured, configure and start the gzip module, and then use local compressed files first.
Don’t be stupid and don’t configure nginx, or you will get nothing. The easiest way to verify whether the configuration is successful is to delete the source file to see if it can be opened normally.
npm i vite-plugin-compression -D
import viteCompression from 'vite-plugin-compression';
plugins: [
vue(),
viteCompression({
verbose: true, // 是否在控制台中输出压缩结果
disable: false,
threshold: 10240, // 如果体积大于阈值，将被压缩，单位为b，体积过小时请不要压缩，以免适得其反
algorithm: 'gzip', // 压缩算法，可选['gzip'，' brotliccompress '，'deflate '，'deflateRaw']
ext: '.gz',
deleteOriginFile: false, // 源文件压缩后是否删除
}),
],
Image compression vite-plugin-imagemin
This can reduce the size, but the resources are abroad, so it is not easy to install.
You can replace the mirror source: Reference link: Domestic npm source mirror (npm accelerated download) Specify npm mirror
npm i vite-plugin-imagemin -D
import viteImagemin from 'vite-plugin-imagemin'
plugin: [
viteImagemin({
gifsicle: {
optimizationLevel: 7,
interlaced: false
},
optipng: {
optimizationLevel: 7
},
mozjpeg: {
quality: 20
},
pngquant: {
quality: [0.8, 0.9],
speed: 4
},
svgo: {
plugins: [
{
name: 'removeViewBox'
},
{
name: 'removeEmptyAttrs',
active: false
}
]
}
})
]