Vue專案基本優化

2021-10-05 03:45:19 字數 1347 閱讀 6074

1、路由懶載入,這個基本上每個專案必須。

2、ui框架按需引入,也就是要用哪些元件引入哪些元件

3、關閉map檔案的生成,沒關閉的vue專案打包後就會有很多的.map檔案。這些檔案主要是幫助我們線上除錯**,檢視樣式。腳手架2是在index.js。腳手架3就vue.config.js裡面。將productionsourcemap 改為false。

4、使用cdn

webpack配置

externals:
/public/index.html的 head 元素中引入相關的 cdn 

*以上這幾個方法,基本上就是能做到整個專案的大體優化,但是寫**的時候很多細節也能為專案整體提公升流暢度。比如以下

v-ifv-show分場景使用

v-if 才是真正的條件渲染,因為它會確保在切換過程中條件塊內的事件***和子元件適當地被銷毀和重建;也是惰性的:如果在初始渲染時條件為false,則什麼也不做。直到條件第一次變為true時,才會開始渲染條件塊。

v-show 不管初始條件是什麼,元素總是會被渲染,並且只是簡單地基於css的display屬性進行切換。

所以,v-if 適用於在執行時很少改變條件,不需要頻繁切換條件的場景,v-show 則適用於需要非常頻繁切換條件的場景。

computedwatch區分使用場景

computed是計算屬性,依賴其它屬性值,並且 computed 的值有快取,只有它依賴的屬性值發生改變,下一次獲取 computed 的值時才會重新計算 computed 的值。

當我們需要進行數值計算,並且依賴於其它資料時,應該使用 computed,因為可以利用 computed 的快取特性,避免每次獲取值時,都要重新計算。

當我們需要在資料變化時執行非同步或開銷較大的操作時,應該使用 watch,使用 watch 選項允許我們執行非同步操作 ( 訪問乙個 api ),限制我們執行該操作的頻率,並在我們得到最終結果前,設定中間狀態。這些都是計算屬性無法做到的。

還有事件銷毀等等,,,很多可以從細節優化的地方

vue專案優化

1.通過nprogress新增進度條效果 安裝執行依賴 匯入nprogress包對應的js和css import nprogress from nprogress import nprogress nprogress.css 在axios的request 中展示進度條 nprogress.start...

vue專案優化

專案優化 進度條新增 移除打包之後的console 只在發布階段移除console 利用vue.config.js修改webpack的預設配置 自定義入口檔案 通過cdn載入外部資源 配置element ui的cdn資源 根據不同環境定製不同的首頁內容 我們要在index.html中來判斷當前環境為...

vue專案優化

1 盡可能的減少watcher的數量,當監聽資料是乙個物件的時候,最好具體到監聽物件的屬性 2 內容比較多的時候可以用懶載入 分頁 滾動載入或者tab方式,減少每次渲染的數量 3 結合v if,非同步顯示dom結構,減少不必要元件的載入 4 給列表渲染加上唯一的key值,避免重複建立和大規模的重新渲...