vue專案優化

2022-05-18 17:47:04 字數 459 閱讀 4020

1 盡可能的減少watcher的數量,當監聽資料是乙個物件的時候,最好具體到監聽物件的屬性;

2 內容比較多的時候可以用懶載入、分頁、滾動載入或者tab方式,減少每次渲染的數量;

3 結合v-if,非同步顯示dom結構,減少不必要元件的載入;

4 給列表渲染加上唯一的key值,避免重複建立和大規模的重新渲染;

5 元件有明確含義,只處理類似的業務。復用性越高越好,配置性越強越好,減少元件之間的耦合度;

6 路由的按需載入,使用require.ensure()載入路由模板,這樣設定的元件會被分開打包,減少了index.js(首屏載入的js檔案)包的體積,但是增加了請求包的次數;

7 使用keep-alive 可以使被包含的元件保留狀態,或避免重新渲染。注意給元件取個名字;

8 第三方庫盡量**之後再使用,比如使用element-ui中的按需載入;

9 使用骨架圖;

原文:

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專案打包優化

專案寫完了,專案需要打包才能上線 打包命令 yarn build 打包完目錄檔案的說明 帶 chunk vendors 的都是 第三方的依賴包 打完包的 可以直接於伺服器環境根目錄執行 不需要額外配置 外掛程式 live server 全域性安裝 npm i live server g 啟動 只需要...