Vite+Vue3加載速度優(yōu)化全過程
更新時間：2025年12月03日 17:09:13 作者：acheding
文章介紹了優(yōu)化前端項目性能的幾種方法,包括減小打包體積、異步加載、使用CDN、路由懶加載和組件異步加載等,以提升首屏加載速度和用戶體驗
可以考慮從以下幾個方面優(yōu)化。
整體思路：1.減小打包體積。2.異步加載。
靜態(tài)資源拆分打包
在常規(guī)打包方法下，所有的第三方依賴將會都打包在一個 vendor.js 文件里，首次打開頁面時，服務器會先加載這個大文件，導致白屏時間過長。
而我們打包時，事先將依賴拆分成很多小文件各自進行打包，便可以實現(xiàn)異步加載，大大降低加載時長，提升加載效率，減少白屏時間。
具體操作如下：
export default defineConfig({
plugins: [vue()],
build: {
chunkSizeWarningLimit: 1000, // 單個模塊文件大小限制1000KB
terserOptions: {
// 清除代碼中console和debugger
compress: {
drop_console: true,
drop_debugger: true,
},
},
rollupOptions: {
output: {
manualChunks(id) {
// 靜態(tài)資源拆分
if (id.includes("node_modules")) {
return id
.toString()
.split("node_modules/")[1]
.split("/")[0]
.toString();
}
},
},
},
},
});
nginx 開啟 gzip 壓縮
gzip 壓縮分兩種，一種是服務器壓縮后傳輸給瀏覽器，但是這種方案是請求時服務器實時壓縮，比較消耗服務器性能；另外一種就是前端在打包的時候壓縮好，服務器做一些相應配置就可以返回壓縮包給瀏覽器，只是打包出來的 dist 體積會偏大，但是不消耗服務器性能。這兩種綜合起來使用是比較劃算的。
server {
listen 80 default_server;
listen [::]:80 default_server;
listen 443 ssl default_server;
listen [::]:443 ssl default_server;
root /xxxx/xxxxxx/xxxxx/dist;
index index.html;
server_name xxxxx.xxxx;
gzip on; // 開啟服務器實時gzip
gzip_static on; // 開啟靜態(tài)gz文件返回，如果存在請求以gz結尾的靜態(tài)文件，則直接返回該文件
gzip_min_length 1k; // 啟用gzip壓縮的最小文件，小于設置值的文件將不會壓縮
#gzip_disable "msie6"; // 禁用IE 6 gzip
gzip_vary on; // 是否在http header中添加Vary: Accept-Encoding，建議開啟
gzip_proxied any; // 對代理文件進行壓縮
gzip_comp_level 9; // gzip 壓縮級別，1-9，數(shù)字越大壓縮的越好，也越占用CPU時間
gzip_buffers 4 16k; // 設置壓縮所需要的緩沖區(qū)大小
gzip_http_version 1.0; // 設置gzip壓縮針對的HTTP協(xié)議版本
// 進行壓縮的文件類型
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/jpeg image/gif image/png image/svg+xml;
location / {
try_files $uri $uri/ /index.html;
}
}
部分依賴不打包，引入 cdn
在沒有使用 cdn 加速之前，例如 element-plus、@element-plus/icons-vue、vue、vux、axios、vue-router、echarts 等依賴都會打包，導致 vendor.js 體積很大，影響首屏加載速度。
這個優(yōu)化則是選擇性地將這些第三方依賴不加入打包，部署到線上之后直接引用線上 cdn 地址。
1.首先需要下載一個插件。
yarn add rollup-plugin-external-globals -D
2.然后在 main.js 文件中使用此插件，進行選擇性打包，并在打包時將本地的引用替換成 cdn。這樣就可以做到在本地仍然使用依賴，部署線上使用 cdn。
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import externalGlobals from "rollup-plugin-external-globals";
export default defineConfig({
plugins: [vue()],
build: {
chunkSizeWarningLimit: 1000,
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true,
},
},
rollupOptions: {
//以下文件不打包
external: [
"vue",
"element-plus",
"@element-plus/icons-vue",
"vuex",
"axios",
"vue-router",
"echarts",
],
plugins: [
// 打包時自動將代碼中的引入替換成cdn引入
externalGlobals({
vue: "Vue",
"element-plus": "ElementPlus",
"@element-plus/icons-vue": "ElementPlusIconsVue",
vuex: "Vuex",
axios: "axios",
"vue-router": "VueRouter",
echarts: "echarts",
}),
],
output: {
manualChunks(id) {
if (id.includes("node_modules")) {
return id
.toString()
.split("node_modules/")[1]
.split("/")[0]
.toString();
}
},
},
},
},
});
3.在 index.html 中進行 cdn 引入。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" rel="external nofollow" />
<script src="https://unpkg.com/vue@3.2.16/dist/vue.global.js"></script>
<link
rel="stylesheet"
rel="external nofollow"
/>
<script src="https://unpkg.com/element-plus@2.1.8/dist/index.full.js"></script>
<script src="https://unpkg.com/@element-plus/icons-vue@1.1.4/dist/index.iife.min.js"></script>
<script src="https://unpkg.com/vuex@4.0.2/dist/vuex.global.js"></script>
<script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue-router@4.1.6/dist/vue-router.global.js"></script>
<script src="https://unpkg.com/echarts@5.3.0/dist/echarts.min.js"></script>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no"
/>
<title>Ache</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
<style></style>
</html>
路由懶加載
在路由中通常會定義很多不同的頁面，打包到同一個 js 文件中，文件將會異常的大，路由懶加載就是將各個模塊分開打包，匹配到對應路由時再加載對應模塊，減少加載時間。
也就是說，一開始進入頁面時不需要一次性把資源都加載完，需要時再加載對應的資源。
以下介紹兩種實現(xiàn)路由懶加載的方式。
1.ES6 的 import()
const routes = [
{
path: item.path,
name: item.name,
component: () => import(`/src/views/${item.view}.vue`),
},
];
2.Vite 的 import.meta.glob()
const modules = import.meta.glob("/src/views/*.vue");
const routes = [
{
path: item.path,
name: item.name,
component: modules[`/src/views/${item.view}.vue`],
},
];
組件異步加載
在 Vue 3.x 中，異步組件的導入需要使用輔助函數(shù) defineAsyncComponent 來進行顯式聲明。
<script setup>
import { defineAsyncComponent } from "vue";
const child = defineAsyncComponent(() => import("/src/components/child.vue"));
</script>
<template>
<child></child>
</template>
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要給大家介紹了關于vue3?Table分頁保留選中狀態(tài)的相關資料,vue table組件是一個非常方便的表格組件,它可以幫助我們實現(xiàn)分頁和選中功能,需要的朋友可以參考下2023-08-08
插槽slot可以說在一個Vue項目里面處處都有它的身影，比如我們使用一些UI組件庫的時候，我們通常可以使用插槽來自定義我們的內容，這篇文章主要介紹了Vue3中slot插槽使用方式,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue使用插槽分發(fā)內容slot的用法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
路由守衛(wèi)又稱導航守衛(wèi)，指是路由跳轉前、中、后過程中的一些鉤子函數(shù),這篇文章主要介紹了Vue中的路由與多種守衛(wèi),需要的朋友可以參考下2023-02-02
這篇文章主要為大家詳細介紹了Vue使用element?plus組件時出現(xiàn)時間格式問題的解決方法,文中的示例代碼講解詳細,需要的小伙伴可以參考下2025-07-07
echarts實現(xiàn)獲取datazoom的起始值(包括x軸和y軸)
這篇文章主要介紹了echarts實現(xiàn)獲取datazoom的起始值(包括x軸和y軸)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue + socket.io實現(xiàn)一個簡易聊天室示例代碼
本篇文章主要介紹了vue + socket.io實現(xiàn)一個簡易聊天室示例代碼，具有一定的參考價值，有興趣的可以了解一下。2017-03-03
這篇文章主要介紹了vue使用pdfjs顯示PDF可復制的實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了解決Vue_localStorage本地存儲和本地取值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
在Vue中,過濾器不僅可以處理簡單的文本格式化,還可以接受參數(shù)以實現(xiàn)更復雜的功能,本文將介紹如何在Vue中使用過濾器參數(shù),感興趣的小伙伴可以了解下2025-05-05