摘要：很多優化點都是根據實際情況入手，上面這幾個，都是我在做項目時，感覺不合適而進行優化的，后面會持續補充下去

主要說的是，我在項目中，自己遇到的一些小問題和解決方案

// 有一個 test 的組件



// 然后有三個頁面，引入了 test 組件
// h1.vue, h2.vue, h3.vue 分別都引入 test 組件

第一次打包文件之后，三個頁面的 js 文件，都會出現相同的一個 base64 圖片

后面第二次打包使用 import 進行引用，或者直接在標簽寫死，就不會出現上面這種情況

import a from "a.jpg"

使用 keep-alive 對某些頁面進行緩存

// app.vue

  

在 router-view 父級，加上一層 keep-alive，再使用 include ，告訴 vue 有哪些頁面需要緩存，就行了。

其中 a, b, c 是 .vue 文件的 name 屬性值

keep-alive 標簽，支持兩個屬性

include: 只有匹配的組件會被緩存

exclude: 任何匹配的組件都不會被緩存

會被緩存的頁面（其實就是一個 vue 組件），離開時，vue 會在內部緩存當前組件的狀態，下次再次進入這個頁面，就會顯示離開時的狀態

如果有些需求，需要你在特定得狀態下，才需要緩存，而在其他時間，進入頁面都是保持最初的狀態時，我們可以使用 vue 的一個方法，去銷毀該組件，達到刷新的效果

在 activated 或 deactivated 鉤子函數事件中，使用 this.$destroy() 這個方法進行銷毀組件

使用 keepa-alive 的好處，緩存組件，的確是很好，我在項目體驗中，更重要是緩存頁面離開時的狀態，這個真得非常棒。

比如我在一個支付頁面，有 M 種狀態，然后要用戶去另外一個頁面去設置密碼后，才能支付（特定需求），這時不能用一個遮罩去擋住，而是真正得跳轉另一個頁面，然后用戶在另外一個頁面操作完后，跳回去支付頁面，此時支付頁面還是維持離開時的狀態，大大減少了很多工作（可以用 vuex 實現此效果，不過有點麻煩）

而且配上鉤子函數和 $destroy 銷毀組件的方法，可以處理好各種情況

2018.01.15 更新

使用 $destroy 對組件進行銷毀，會有個 BUG。

有三個頁面 A，B，C。B 頁面是要進行緩存的。B 頁面，配置了 keep-alive

A -> B

B -> C（B 到 C 要進行緩存，所以不銷毀）

C -> B (B 維持跳去 C 時的狀態)

B -> A (不緩存)

A -> B

B -> C（B 到 C 要進行緩存，所以不銷毀）

C -> B (這時候就會出問題了！，會觸發 activated 和 created 兩個鉤子函數。在 vue 的 issue 中有人提出過這個問題，尤大也說了不支持。這里是鏈接)

解決方案：

我現在是把頁面加進去 keep-alive 里面，然后離開時，判斷下次進入要不要刷新頁面。如果要刷新頁面，手動把 state 更新…..超級麻煩，不優雅

2018.01.17 更新

有一個新的解決方案，動態的修改 include，達到更新的效果

比如，t1 組件是要緩存的

  

// ...
watch: {
  $route(to) {
    if (to.name === "t1") {
      this.array = "t1"
    }
  }
}

每次要去到 t1 頁面，對頁面設置為緩存。然后在 t1 頁面要跳去其他頁面時候，判斷是否需要緩存頁面，如果不需要，修改 array 這個值。而這個 array 值，應該存在 vuex 中，這樣可以更好地處理它

在 router.js 文件里

{ path: "/home", component: resolve => require(["@/module/home"], resolve) },
{ path: "/h1", component: resolve => require(["@/module/h1"], resolve) },
{ path: "/h2", component: resolve => require(["@/module/h2"], resolve) }

這里使用了 vue-router 的懶加載，結合 webpack 的代碼分割，將代碼按頁面進行分割，達到懶加載效果。進入某個頁面，會按需加載 js 文件，有效地降低首屏文件大小

但這里有個問題，如果某頁面的 js 文件很大，用戶在跳轉頁面時，會出現暫時性的白屏或者無法點擊的情況，影響用戶體驗

這里我覺得就要根據項目情況去考慮了。在某個項目中，有5個頁面是沒用代碼分割的，而這5個頁面，瀏覽數會比較多，并且文件的大小相對會比較大。所以取消使用了代碼分隔后，當用戶首次點入這幾個頁面，就不會出現延遲的情況

當你這個頁面使用了很多 icon ，經過 base64 轉換后，這個 js 文件也會相對很大，是否不應該在頁面的 js 文件出現 base64 ?提前把 base64 的圖片加載了？

上面的操作都是為了提高用戶的體驗，這個要看情況而定了

使用代碼分割，文件的大小，會稍微比不用的時候大一點

當我們 npm run build 后，通常可以看到一個依賴文件，有好幾百 KB，甚至 1、2MB 大，而這個文件是所有依賴文件的集合，像 vue.js, vue-router.js, axios.js, mint-ui.js 等

這里我們可以使用 webpack 的 externals 進行優化，webpack 文檔是這樣說 externals: "防止將某些 import 的包(package)打包到 bundle 中，而是在運行時(runtime)再去從外部獲取這些擴展依賴"

externals 其實很多大神的優化貼都有寫了，根據自己得體驗，這里只是簡單得說明

我們在 index.html 引入兩個 js

在 webpack.base.conf.js 里，添加一代代碼

externals: {
  "vue": "Vue",
  "mint-ui": "MINT"
}

這樣就能無縫切換，使用 cdn 去加載比較大的依賴文件，減少打包后的 bundle 文件大小

沒有使用 externals 的情況， vendor.js 文件是 307KB

使用 externals 的情況， vendor.js 文件是 107KB

這里面是去掉了 vue 和 mint-ui 兩個 js 文件，而這兩個 js 文件通過外鏈 cdn 進行引用，兩個 js 文件大約都是 31KB 左右，這里面節省了 140KB 左右的大小

這樣做，雖然加多了 HTTP 請求，但是不會影響并發的數量，而且大大減少了單個文件的大小，性能更好

在 ngrok 里運行時，會運行得更快（測試過）

在 vue 文檔中，是這樣提示的：對低開銷的靜態組件使用 v-once

使用了 v-once ，除了第一次的渲染，后面就不會再次渲染了

{{ a }}

最后 div 還是顯示 1。這可以用于優化更新性能

以上的一些問題，在 PC 端好像影響不大，移動端的話，還是比較嚴重的。很多優化點都是根據實際情況入手，上面這幾個，都是我在做項目時，感覺不合適而進行優化的，后面會持續補充下去~