Vue3之vite打包優(yōu)化方式
更新時(shí)間：2025年04月25日 08:49:19 作者：夢(mèng)凡塵
這篇文章主要介紹了Vue3之vite打包優(yōu)化方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
一、部分組件異步加載
按照vue官方文檔的介紹，對(duì)于某些優(yōu)先級(jí)比較低的組件可以使用異步加載的方式進(jìn)行引入
import {defineAsyncComponent} from "vue"
const MyDiagram = defineAsyncComponent(()=>import("./components/myDiagram.vue"))二、視圖分析優(yōu)化打包資源
1，下載插件
yarn add --dev rollup-plugin-visualizer
2，配置插件
//vite.config.js
import {visualizer} from "rollup-plugin-visualizer"
export default defineConfig({
plugins:[
visualizer({
emitFile:false,
file:"states.html",
open:true
})
]
})3，執(zhí)行打包命令，分析生成的視圖分析頁(yè)面
三、更改vite配置文件進(jìn)行打包優(yōu)化
1，依賴(lài)分包
//vite.config.js
build:{
rollupOptions:{
output:{ //靜態(tài)資源分類(lèi)打包
chunkFileNames: 'static/js/[name]-[hash].js',
entryFileNames: 'static/js/[name]-[hash].js',
assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
manualChunks(id){ //靜態(tài)資源拆分打包
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString(); }
}
}
}
}2，開(kāi)啟Gzip
它的主要作用就是縮小打包體積
安裝插件 yarn add vite-plugin-compression -D
參數(shù)：
filter：過(guò)濾器，對(duì)哪些類(lèi)型的文件進(jìn)行壓縮, 默認(rèn)為 /.(js|mjs|json|css|html)$/iverbose：true; 是否在控制臺(tái)輸出壓縮結(jié)果，默認(rèn)為truethreshold: 啟用壓縮的文件大小限制，單位是字節(jié)，默認(rèn)為0disable:false; 是否禁用壓縮，默認(rèn)為falsedeleteOriginFile: 壓縮后是否刪除原文件，默認(rèn)為falsealgorithm: 采用的壓縮算法,默認(rèn)是gzipext：生成的壓縮包后綴
//vite.config.js
import viteCompression from "vite-plugin-compression";
plugins:[
viteCompression({
verbose: true,
disable: false,
threshold: 10240,
algorithm: 'gzip',
ext: '.gz',
})
]3，第三方組件庫(kù)按需加載
安裝插件 unplugin-vue-components 和 unplugin-auto-import
yarn add unplugin-auto-import -D yarn add unplugin-vue-components -D
其中 unplugin-vue-components 主要配置第三方組件按需加載
unplugin-auto-import 主要配置第三方aip 自動(dòng)導(dǎo)入
簡(jiǎn)單配置第三方組件按需導(dǎo)入
//vite.config.js
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver,ElementPlusResolver} from 'unplugin-vue-components/resolvers'
export default defineConfig {
plugins: [
// ...
AutoImport({
resolvers: [AntDesignVueResolver(),ElementPlusResolver()],
}),
Components({
resolvers: [AntDesignVueResolver(),ElementPlusResolver()],
}),
],總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
項(xiàng)目在線上會(huì)遇到管理員類(lèi)似權(quán)限比較大的用戶(hù),會(huì)在同一瀏覽器登陸多個(gè)賬號(hào),遇到這樣的問(wèn)題如何處理呢,下面小編給大家介紹vue同一瀏覽器登錄多賬號(hào)處理方法,感興趣的朋友一起看看吧2024-01-01
vue props default Array或是Object的正確寫(xiě)法說(shuō)明
這篇文章主要介紹了vue props default Array或是Object的正確寫(xiě)法說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
this.$set是Vue中的一個(gè)方法,用于在響應(yīng)式對(duì)象上設(shè)置新的屬性或修改已有的屬性,強(qiáng)制刷新并確保這些屬性也是響應(yīng)式的,這篇文章主要介紹了Vue中this.$set()使用方法的相關(guān)資料,需要的朋友可以參考下2025-09-09
這篇文章主要為大家介紹了Vue extends 屬性的用法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
淺談Vue頁(yè)面級(jí)緩存解決方案feb-alive (下)
這篇文章主要介紹了淺談Vue頁(yè)面級(jí)緩存解決方案feb-alive(下),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
使用Vue+ElementUI動(dòng)態(tài)生成面包屑導(dǎo)航教程
Vue和ElementUI都是非常流行的前端開(kāi)發(fā)框架,它們可以讓我們更加便捷地開(kāi)發(fā)前端應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于使用Vue+ElementUI動(dòng)態(tài)生成面包屑導(dǎo)航的相關(guān)資料,需要的朋友可以參考下2023-05-05
Vue實(shí)現(xiàn)商品飛入購(gòu)物車(chē)效果(電商項(xiàng)目)
這篇文章主要介紹了Vue實(shí)現(xiàn)商品飛入購(gòu)物車(chē)效果(電商項(xiàng)目)，這種效果在一些電商平臺(tái)經(jīng)常會(huì)用到，今天小編通過(guò)代碼詳解,需要的朋友可以參考下2019-11-11
這篇文章主要給大家介紹了關(guān)于vue中插槽slot的理解和使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
前端處理axios請(qǐng)求下載后端返回的文件流代碼實(shí)例
使用axios可以很方便地獲取后端返回的文件流數(shù)據(jù),并在前端直接在瀏覽器下載,這篇文章主要給大家介紹了關(guān)于前端處理axios請(qǐng)求下載后端返回的文件流的相關(guān)資料,需要的朋友可以參考下2024-07-07
這篇文章主要為大家介紹了Vue編譯器解析compile源碼解析示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09