vite打包配置以及性能優(yōu)化
安裝插件
首先該安裝的插件，你要安裝一下吧
這三個(gè)是基本的插件，其他優(yōu)化的插件下面會介紹到
"vite": "4.4.6",
"vite-plugin-html": "^3.2.0",
"@vitejs/plugin-vue": "^4.2.3",
vite.config.ts文件中
配置
這是最基本的配置，當(dāng)然，可以上線，但仍然有很多待優(yōu)化的地方
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,
},
},
}),
],
};
};
性能優(yōu)化
性能優(yōu)化無非就是減小打包后體積；減小http請求；加速渲染；
其實(shí)下面介紹的只是我自己用到的，還有更過的插件參考官網(wǎng)：vite插件
一會要看官網(wǎng)，發(fā)現(xiàn)的好的可以告訴我哦
rollup-plugin-visualizer
首先安裝一個(gè)打包體積分析的插件：rollup-plugin-visualizer ，打包時(shí)會生成一個(gè)stats.html文件去顯示各個(gè)包依賴的大小；
npm i rollup-plugin-visualizer -D
import { visualizer } from 'rollup-plugin-visualizer'; //打包體積分析
plugins: [
visualizer({ open: true}),
],
vite-plugin-css-injected-by-js
將css注入到j(luò)s文件中，有效減少http請求 但這里css中的背景圖片路徑會錯(cuò)誤（目前沒有找到解決方案），選擇性使用
npm i vite-plugin-css-injected-by-js -D
import { visualizer } from 'rollup-plugin-visualizer'; //打包體積分析
plugins: [
visualizer(),
],
親測可用，就不重新打包給截圖了（效減少http請求 但這里css中的背景圖片路徑會錯(cuò)誤（目前沒有找到解決方案））
去除console、debugger
build: {
outDir: VITE_OUT_DIR,
sourcemap: true,
chunkSizeWarningLimit: 1000,
minify: 'terser', //壓縮方式
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true,
},
},
},
CDN 加速
注意這使用與大多數(shù)項(xiàng)目，但對于無網(wǎng)絡(luò)連接的b/s端不能用
注意：找可靠穩(wěn)定的cdn連接，用戶要有網(wǎng)
下面是舉兩個(gè)例子
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>'
},
},
}),
],
注意在入口html中引用
<head>
<%- vuescript %>
</head>
文件壓縮 vite-plugin-compression 文件壓縮
這里nginx 也要配置， 配置啟動gzip模塊， 然后優(yōu)先使用本地壓縮好的文件。
不要傻傻的不配置nginx，不然徒勞無獲，驗(yàn)證有沒有配置成功最簡單的方法就是刪除源文件看是否可以正常打開
npm i vite-plugin-compression -D
import viteCompression from 'vite-plugin-compression';
plugins: [
vue(),
viteCompression({
verbose: true, // 是否在控制臺中輸出壓縮結(jié)果
disable: false,
threshold: 10240, // 如果體積大于閾值，將被壓縮，單位為b，體積過小時(shí)請不要壓縮，以免適得其反
algorithm: 'gzip', // 壓縮算法，可選['gzip'，' brotliccompress '，'deflate '，'deflateRaw']
ext: '.gz',
deleteOriginFile: false, // 源文件壓縮后是否刪除
}),
],
圖片壓縮 vite-plugin-imagemin
這個(gè)可以降低體積，但是資源在國外，不好安裝
可以更換鏡像源：參考連接：國內(nèi)npm源鏡像（npm加速下載） 指定npm鏡像
**如果使用npm安裝：**windows電腦中C:\Windows\System32\drivers\etc\host 文件配置文章來源：http://www.zghlxwxcb.cn/news/detail-659378.html
199.232.4.133 raw.githubusercontent.com
如果使用yarn安裝： package.json文件配置文章來源地址http://www.zghlxwxcb.cn/news/detail-659378.html
"resolutions": {
"bin-wrapper": "npm:bin-wrapper-china"
},
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
}
]
}
})
]
到了這里，關(guān)于vite打包配置以及性能優(yōu)化的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
