教你如何優(yōu)化?Vue.js?應用程序
單頁面應用（SPAs）當處理實時、異步數(shù)據(jù)時，可以提供豐富的、可交互的用戶體驗。但它們也可能很重，很臃腫，而且性能很差。在這篇文章中，我們將介紹一些前端優(yōu)化技巧，以保持我們的Vue應用程序相對精簡，并且只在需要的時候提供必需的JS。
注意：這里假設你對Vue和Composition API有一定的熟悉程度，但無論你選擇哪種框架，都希望能有一些收獲。
本文作者是一名前端開發(fā)工程師，職責是構(gòu)建Windscope應用程序。下面介紹基于該程序所做的一系列優(yōu)化。
選擇框架
我們選擇的JS框架是Vue，部分原因是它是我最熟悉的框架。以前，Vue與React相比，整體包規(guī)模較小。然而，自從最近的React更新以來，平衡似乎已經(jīng)轉(zhuǎn)移到React身上。這并不重要，因為我們將在本文中研究如何只導入我們需要的東西。這兩個框架都有優(yōu)秀的文檔和龐大的開發(fā)者生態(tài)系統(tǒng)，這是另一個考慮因素。Svelte是另一個可能的選擇，但由于不熟悉，它需要更陡峭的學習曲線，而且由于較新，它的生態(tài)系統(tǒng)不太發(fā)達。
Vue Composition API
Vue 3引入了Composition API，這是一套新的API用于編寫組件，作為Options API的替代。通過專門使用Composition API，我們可以只導入我們需要的Vue函數(shù)，而不是整個包。它還使我們能夠使用組合式函數(shù)編寫更多可重用的代碼。使用Composition API編寫的代碼更適合于最小化，而且整個應用程序更容易受到tree-shaking的影響。
注意：如果你正在使用較老版本的Vue，仍然可以使用Composition API：它已被補丁到Vue 2.7，并且有一個適用于舊版本的官方插件。
導入依賴
一個關鍵目標是減少通過客戶端下載的初始JS包的尺寸。Windscope廣泛使用D3進行數(shù)據(jù)可視化，這是一個龐大的庫，范圍很廣。然而，Windscope只需要使用D3的一部分。
讓我們的依賴包盡可能小的一個最簡單的方法是，只導入我們需要的模塊。
讓我們來看看D3的selectAll函數(shù)。我們可以不使用默認導入，而只從d3-selection模塊中導入我們需要的函數(shù)：
// Previous:
import * as d3 from 'd3'
// Instead:
import { selectAll } from 'd3-selection'代碼分割
有一些包在整個Windscope的很多地方都有使用，比如AWS Amplify認證庫，特別是Auth方法。這是一個很大的依賴，對我們的JS包的大小有很大貢獻。比起在文件頂部靜態(tài)導入模塊，動態(tài)導入允許我們在代碼中需要的地方準確導入模塊。
比起這么導入：
import { Auth } from '@aws-amplify/auth'
const user = Auth.currentAuthenticatedUser()我們可以在想要使用它的地方導入模塊：
import('@aws-amplify/auth').then(({ Auth }) => {
const user = Auth.currentAuthenticatedUser()
})這意味著該模塊將被分割成一個單獨的JS包（或 "塊"），只有該模塊被使用時，才會被瀏覽器下載。
除此之外，瀏覽器可以緩存這些依賴，比起應用程序的其他部分代碼，這些模塊基本不會改變。
懶加載
我們的應用程序使用Vue Router作為導航路由。與動態(tài)導入類似，我們可以懶加載我們的路由組件，這樣就可以在用戶導航到路由時，它們才會被導入（連同其相關的依賴關系）。
index/router.js文件：
// Previously:
import Home from "../routes/Home.vue";
import About = "../routes/About.vue";
// Lazyload the route components instead:
const Home = () => import("../routes/Home.vue");
const About = () => import("../routes/About.vue");
const routes = [
{
name: "home",
path: "/",
component: Home,
},
{
name: "about",
path: "/about",
component: About,
},
];當用戶點擊About鏈接并導航到路由時，About路由所對應的代碼才會被加載。
異步組件
除了懶加載每個路由外，我們還可以使用Vue的defineAsyncComponent方法懶加載單個組件。
const KPIComponent = defineAsyncComponent(() => import('../components/KPI.vue'))
這意味著KPI組件的代碼會被異步導入，正如我們在路由示例中看到的那樣。當組件正在加載或者處于錯誤狀態(tài)時，我們也可以提供展示的組件（這個在加載特別大的文件時非常有用）。
const KPIComponent = defineAsyncComponent({
loader: () => import('../components/KPI.vue'),
loadingComponent: Loader,
errorComponent: Error,
delay: 200,
timeout: 5000,
});
分割API請求
我們的應用程序主要關注的是數(shù)據(jù)可視化，并在很大程度上依賴于從服務器獲取大量的數(shù)據(jù)。其中一些請求可能相當慢，因為服務器必須對數(shù)據(jù)進行一些計算。在最初的原型中，我們對每個路由的REST API進行了一次請求。不幸地是，我們發(fā)現(xiàn)這會導致用戶必須等待很長時間。
我們決定將API分成幾個端點，為每個部件發(fā)出請求。雖然這可能會增加整體的響應時間，但這意味著應用程序應該更快可用，因為用戶將看到頁面的一部分被渲染，而他們?nèi)栽诘却渌糠?。此外，任何可能發(fā)生的錯誤都會被本地化，而頁面的其他部分仍然可以使用。
有條件加載組件
現(xiàn)在我們可以把它和異步組件結(jié)合起來，只在我們收到服務器的成功響應時才加載一個組件。下面示例中我們獲取數(shù)據(jù)，然后在fetch函數(shù)成功返回時導入組件：
<template>
<div>
<component :is="KPIComponent" :data="data"></component>
</div>
</template>
<script>
import {
defineComponent,
ref,
defineAsyncComponent,
} from "vue";
import Loader from "./Loader";
import Error from "./Error";
export default defineComponent({
components: { Loader, Error },
setup() {
const data = ref(null);
const loadComponent = () => {
return fetch('<https://api.npoint.io/ec46e59905dc0011b7f4>')
.then((response) => response.json())
.then((response) => (data.value = response))
.then(() => import("../components/KPI.vue") // Import the component
.catch((e) => console.error(e));
};
const KPIComponent = defineAsyncComponent({
loader: loadComponent,
loadingComponent: Loader,
errorComponent: Error,
delay: 200,
timeout: 5000,
});
return { data, KPIComponent };
}
}
該模式可以擴展到應用程序的任意地方，組件在用戶交互后進行渲染。比如說，當用戶點擊Map標簽時，加載map組件以及相關依賴。
CSS
除了動態(tài)導入JS模塊外，在組件的<style>塊中導入依賴也會懶加載CSS：
// In MapView.vue
<style>
@import "../../node_modules/leaflet/dist/leaflet.css";
.map-wrapper {
aspect-ratio: 16 / 9;
}
</style>
完善加載狀態(tài)
在這一點上，我們的API請求是并行運行的，組件在不同時間被渲染?？赡軙⒁獾揭患拢蔷褪琼撁婵雌饋砗茉愀?，因為布局會有很大的變化。
一個讓用戶感覺更順暢的快速方法，是在部件上設置一個與渲染的組件大致對應的長寬比，這樣用戶就不會看到那么大的布局變化。我們可以傳入一個參數(shù)以考慮到不同的組件，并用一個默認值來回退。
// WidgetLoader.vue
<template>
<div class="widget" :style="{ 'aspect-ratio': loading ? aspectRatio : '' }">
<component :is="AsyncComponent" :data="data"></component>
</div>
</template>
<script>
import { defineComponent, ref, onBeforeMount, onBeforeUnmount } from "vue";
import Loader from "./Loader";
import Error from "./Error";
export default defineComponent({
components: { Loader, Error },
props: {
aspectRatio: {
type: String,
default: "5 / 3", // define a default value
},
url: String,
importFunction: Function,
},
setup(props) {
const data = ref(null);
const loading = ref(true);
const loadComponent = () => {
return fetch(url)
.then((response) => response.json())
.then((response) => (data.value = response))
.then(importFunction
.catch((e) => console.error(e))
.finally(() => (loading.value = false)); // Set the loading state to false
};
/* ...Rest of the component code */
return { data, aspectRatio, loading };
},
});
</script>
取消API請求
在一個有大量API請求的頁面上，如果用戶在所有請求還沒有完成時離開頁面，會發(fā)生什么？我們可能不想這些請求繼續(xù)在后臺運行，拖慢了用戶體驗。
我們可以使用AbortController接口，這使我們能夠根據(jù)需要中止API請求。
在setup函數(shù)中，我們創(chuàng)建一個新的controller，并傳遞signal到fetch請求參數(shù)中：
setup(props) {
const controller = new AbortController();
const loadComponent = () => {
return fetch(url, { signal: controller.signal })
.then((response) => response.json())
.then((response) => (data.value = response))
.then(importFunction)
.catch((e) => console.error(e))
.finally(() => (loading.value = false));
};
}
然后我們使用Vue的onBeforeUnmount函數(shù)，在組件被卸載之前中止請求：
onBeforeUnmount(() => controller.abort());
如果你運行該項目并在請求完成之前導航到另一個頁面，你應該看到控制臺中記錄的錯誤，說明請求已經(jīng)被中止。
Stale While Revalidate
目前為止，我們已經(jīng)做了相當好的一部分優(yōu)化。但是當用戶前往下個頁面后，然后返回上一頁，所有的組件都會重新掛載，并返回自身的加載狀態(tài)，我們又必須再次等待請求有所響應。
Stale-while-revalidate是一種HTTP緩存失效策略，瀏覽器決定是在內(nèi)容仍然新鮮的情況下從緩存中提供響應，還是在響應過期的情況下"重新驗證 "并從網(wǎng)絡上提供響應。
除了在我們的HTTP響應中應用cache-control頭部（不在本文范圍內(nèi)，但可以閱讀Web.dev的這篇文章以了解更多細節(jié)），我們可以使用SWRV庫對我們的Vue組件狀態(tài)應用類似的策略。
首先，我們必須從SWRV庫中導入組合式內(nèi)容：
import useSWRV from "swrv";
然后，我們可以在setup函數(shù)使用它。我們把loadComponent函數(shù)改名為fetchData，因為它將只處理數(shù)據(jù)的獲取。我們將不再在這個函數(shù)中導入我們的組件，因為我們將單獨處理這個問題。
我們將把它作為第二個參數(shù)傳入useSWRV函數(shù)調(diào)用。只有當我們需要一個自定義函數(shù)來獲取數(shù)據(jù)時，我們才需要這樣做（也許我們需要更新一些其他的狀態(tài)片段）。因為我們使用的是Abort Controller，所以我們要這樣做；否則，第二個參數(shù)可以省略，SWRV將使用Fetch API：
// In setup()
const { url, importFunction } = props;
const controller = new AbortController();
const fetchData = () => {
return fetch(url, { signal: controller.signal })
.then((response) => response.json())
.then((response) => (data.value = response))
.catch((e) => (error.value = e));
};
const { data, isValidating, error } = useSWRV(url, fetchData);
然后我們將從我們的異步組件定義中刪除loadingComponent和errorComponent選項，因為我們將使用SWRV來處理錯誤和加載狀態(tài)。
// In setup()
const AsyncComponent = defineAsyncComponent({
loader: importFunction,
delay: 200,
timeout: 5000,
});
這意味著，我們需要在模板文件中包含Loader和Error組件，展示或隱藏取決于狀態(tài)。isValidating的返回值告訴我們是否有一個請求或重新驗證發(fā)生。
<template>
<div>
<Loader v-if="isValidating && !data"></Loader>
<Error v-else-if="error" :errorMessage="error.message"></Error>
<component :is="AsyncComponent" :data="data" v-else></component>
</div>
</template>
<script>
import {
defineComponent,
defineAsyncComponent,
} from "vue";
import useSWRV from "swrv";
export default defineComponent({
components: {
Error,
Loader,
},
props: {
url: String,
importFunction: Function,
},
setup(props) {
const { url, importFunction } = props;
const controller = new AbortController();
const fetchData = () => {
return fetch(url, { signal: controller.signal })
.then((response) => response.json())
.then((response) => (data.value = response))
.catch((e) => (error.value = e));
};
const { data, isValidating, error } = useSWRV(url, fetchData);
const AsyncComponent = defineAsyncComponent({
loader: importFunction,
delay: 200,
timeout: 5000,
});
onBeforeUnmount(() => controller.abort());
return {
AsyncComponent,
isValidating,
data,
error,
};
},
});
</script>
我們可以將其重構(gòu)為自己的組合式代碼，使我們的代碼更簡潔一些，并使我們能夠在任何地方使用它。
// composables/lazyFetch.js
import { onBeforeUnmount } from "vue";
import useSWRV from "swrv";
export function useLazyFetch(url) {
const controller = new AbortController();
const fetchData = () => {
return fetch(url, { signal: controller.signal })
.then((response) => response.json())
.then((response) => (data.value = response))
.catch((e) => (error.value = e));
};
const { data, isValidating, error } = useSWRV(url, fetchData);
onBeforeUnmount(() => controller.abort());
return {
isValidating,
data,
error,
};
}
// WidgetLoader.vue
<script>
import { defineComponent, defineAsyncComponent, computed } from "vue";
import Loader from "./Loader";
import Error from "./Error";
import { useLazyFetch } from "../composables/lazyFetch";
export default defineComponent({
components: {
Error,
Loader,
},
props: {
aspectRatio: {
type: String,
default: "5 / 3",
},
url: String,
importFunction: Function,
},
setup(props) {
const { aspectRatio, url, importFunction } = props;
const { data, isValidating, error } = useLazyFetch(url);
const AsyncComponent = defineAsyncComponent({
loader: importFunction,
delay: 200,
timeout: 5000,
});
return {
aspectRatio,
AsyncComponent,
isValidating,
data,
error,
};
},
});
</script>
更新指示
如果我們能在我們的請求重新驗證的時候向用戶顯示一個指示器，這樣他們就知道應用程序正在檢查新的數(shù)據(jù)，這可能會很有用。在這個例子中，我在組件的角落里添加了一個小的加載指示器，只有在已經(jīng)有數(shù)據(jù)，但組件正在檢查更新時才會顯示。我還在組件上添加了一個簡單的fade-in過渡（使用Vue內(nèi)置的Transition組件），所以當組件被渲染時，不會有突兀的跳躍。
<template>
<div
class="widget"
:style="{ 'aspect-ratio': isValidating && !data ? aspectRatio : '' }"
>
<Loader v-if="isValidating && !data"></Loader>
<Error v-else-if="error" :errorMessage="error.message"></Error>
<Transition>
<component :is="AsyncComponent" :data="data" v-else></component>
</Transition>
<!--Indicator if data is updating-->
<Loader
v-if="isValidating && data"
text=""
></Loader>
</div>
</template>
總結(jié)
在建立我們的網(wǎng)絡應用程序時，優(yōu)先考慮性能，可以提高用戶體驗，并有助于確保它們可以被盡可能多的人使用。我希望這篇文章提供了一些關于如何使你的應用程序盡可能高效的觀點--無論你是選擇全部還是部分地實施它們。
SPA可以工作得很好，但它們也可能成為性能瓶頸。所以，讓我們試著把它們變得更好。
到此這篇關于如何優(yōu)化 Vue.js 應用程序的文章就介紹到這了,更多相關Vue.js 應用程序內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue Router 是?Vue.js?的官方路由,它與 Vue.js 核心深度集成,讓用 Vue.js 構(gòu)建單頁應用變得輕而易舉,這篇文章主要介紹了Vue Router的介紹與引入,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了Vue狀態(tài)管理工具Pinia的安裝與使用,一步一步學習如何將pinia運用到項目實戰(zhàn)中去,文中有詳細的安裝教程和使用方法,并通過代碼示例講解的非常詳細,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了el-form 多層級表單的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-09-09
由于在項目中需要對數(shù)據(jù)進行可視化處理,也就是用圖表展示,眾所周知echarts是非常強大的插件,所以這篇文章主要給大家介紹了關于vue+echarts圖表使用的相關資料,需要的朋友可以參考下2021-09-09
本篇文章主要介紹了vue 文件目錄結(jié)構(gòu)詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了Vue3中操作ref的四種使用方式示例代碼(建議收藏),本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
在現(xiàn)代Web應用中，PDF文檔的使用非常普遍，因為它可以在各種設備和操作系統(tǒng)上保持一致的外觀和格式，本文我們就來探討一下如何在Vue.js應用中使用vue-pdf庫嵌入PDF文檔吧2023-08-08
Vue2.0實現(xiàn)調(diào)用攝像頭進行拍照功能 exif.js實現(xiàn)圖片上傳功能
這篇文章主要為大家詳細介紹了Vue2.0實現(xiàn)調(diào)用攝像頭進行拍照功能，以及圖片上傳功能引用exif.js，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-04-04
最近一段時間，一直在做主題方面的工作。我們的主題，并不是簡單切換一下顏色，或者排版變化這些，而是變化比較大的主題。比如說：主題1和主題2看起來完全不一樣，功能甚至都不一樣。這樣，通過切換css就無法做到了，因此我思考良久，使用了如下2種方法2021-06-06
本篇文章將與各位開發(fā)者分享下 vue-native-websocket 庫的使用以及配置，通過實例代碼給大家分享Vue通過配置WebSocket并實現(xiàn)群聊功能，需要的朋友可以參考下2019-12-12