vue webpack專案優化

2022-07-20 19:24:14 字數 1665 閱讀 1141

總結為:

1:打包優化

2:非同步載入

3:頁面載入時加loading特效

4:點選延遲

5:inline manifest

6:邏輯**優化

方法為:在webpack的公共配置檔案(一般為webpack.base.conf.js)的resolve下有extensions選項。陣列中加入不需要打包的元件,並且在入口的html中使用cdn的方式引入即可

所謂的非同步載入元件,其實就是元件懶載入。主要包含兩部分:路由配置和子元件的呼叫

1:路由設定實現懶載入

2:子元件的呼叫

通常的寫法是,在父元件中import元件,隨後在父元件的components中註冊子元件後使用子元件,比較消耗效能。使用非同步的方法使用子元件 ——直接在components中匯入子元件,需要的時候才載入它:

components: 

頁面的響應、渲染速度的影響原因多種多樣。為了解決使用者在首次進入應用或者頁面切換的時等待的白屏時間較長時,可以使用vue-router提供的beforeeach()和aftereach()方法。所以使用loading進度條是一種比較明智的做法。使用nprogress。api可參考官方文件

,使用方法如下(假設已經安裝好了nprogress):

在router.js中使用import引入nprogress以及它的樣式表,配置ngprocess。並在路由配置完成後,呼叫beforeeach() 和 aftereach方法

//路由配置前

nprogress.configure()

//此處為路由配置列表,可參考上面的非同步載入方式進行編寫

//路由配置後

安裝fastclick後,在main.js中引入即可:

import fastclick from 'fastclick'

fastclick.attach(document.body)

manifest檔案時路徑配置和非同步元件名字列表,這麼做可以減少乙個http請求。具體做法為,先在入口頁面index.html中的head的最後一行加入**

最後在webpack的公共配置檔案(我的是webpack.base.conf.js)的vux-loader配置的 plugins 列表中加入inline-manifest外掛程式:

module.exports = vuxloader.merge(webpackconfig, )
這部分的建議就是:①每個vue檔案盡可能小(多使用元件,加強可復用性);②vue指令中的v-show和v-if的使用:v-if耗效能更多,所以頻繁切換的使用 v-show,不頻繁切換的使用 v-if;③vue指令中的v-for搭配:key使用,確保唯一性;④樣式表css務必加scoped以防止干擾。。。

vue webpack專案優化

方法為 在webpack的公共配置檔案 一般為webpack.base.conf.js 的resolve下有extensions選項。陣列中加入不需要打包的元件,並且在入口的html中使用cdn的方式引入即可,此時會發現打包出來的vender包會變小很多。我自己的示例為 所謂的非同步載入元件,其實就...

vue webpack優化之路

前言 之前我認為對於專案的優化無非是從 上去優化一些東西,比如迴圈呀 函式式呼叫呀 讓你的 看起來更加的簡潔容易懂 後來我在面試過程中不斷有面試官不斷地問了我這些問題所以自己就去研究了一下發現並不是我之前想的那樣,乙個好的webapck優化的勝過於你在整體 上優化的體驗以下是我自己總結的一些 在開始...

Vue webpack專案構建模板

package.json 匯入包的資訊及scripts配置 執行npm start自動打包編譯 啟動瀏覽器 熱更新 devdependencies scripts keywords author license isc description webpack.config.js 配置檔案。const...