vue webpack專案優化

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

所謂的非同步載入元件，其實就是元件懶載入。可以理解為：當我需要使用元件的時候才進行載入。主要包含兩部分：路由配置和子元件的呼叫。

我們可以在router裡使用如下寫法來實現懶載入：

說明：「@」指向專案根目錄，「home」是路由所對應的元件。

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

總結為 1 打包優化 2 非同步載入 3 頁面載入時加loading特效 4 點選延遲 5 inline manifest 6 邏輯 優化 方法為 在webpack的公共配置檔案 一般為webpack.base.conf.js 的resolve下有extensions選項。陣列中加入不需要打包的元件...

vue webpack優化之路

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

Vue webpack專案構建模板

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