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

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

// 有一個 test 的組件



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

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

后面第二次打包使用 import 進(jìn)行引用，或者直接在標(biāo)簽寫死，就不會出現(xiàn)上面這種情況

import a from "a.jpg"

使用 keep-alive 對某些頁面進(jìn)行緩存

// app.vue

  

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

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

keep-alive 標(biāo)簽，支持兩個屬性

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

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

會被緩存的頁面（其實就是一個 vue 組件），離開時，vue 會在內(nèi)部緩存當(dāng)前組件的狀態(tài)，下次再次進(jìn)入這個頁面，就會顯示離開時的狀態(tài)

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

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

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

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

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

2018.01.15 更新

使用 $destroy 對組件進(jìn)行銷毀，會有個 BUG。

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

A -> B

B -> C（B 到 C 要進(jìn)行緩存，所以不銷毀）

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

B -> A (不緩存)

A -> B

B -> C（B 到 C 要進(jìn)行緩存，所以不銷毀）

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

解決方案：

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

2018.01.17 更新

有一個新的解決方案，動態(tài)的修改 include，達(dá)到更新的效果

比如，t1 組件是要緩存的

  

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

每次要去到 t1 頁面，對頁面設(shè)置為緩存。然后在 t1 頁面要跳去其他頁面時候，判斷是否需要緩存頁面，如果不需要，修改 array 這個值。而這個 array 值，應(yīng)該存在 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 的懶加載，結(jié)合 webpack 的代碼分割，將代碼按頁面進(jìn)行分割，達(dá)到懶加載效果。進(jìn)入某個頁面，會按需加載 js 文件，有效地降低首屏文件大小

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

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

當(dāng)你這個頁面使用了很多 icon ，經(jīng)過 base64 轉(zhuǎn)換后，這個 js 文件也會相對很大，是否不應(yīng)該在頁面的 js 文件出現(xiàn) base64 ?提前把 base64 的圖片加載了？

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

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

當(dāng)我們 npm run build 后，通?？梢钥吹揭粋€依賴文件，有好幾百 KB，甚至 1、2MB 大，而這個文件是所有依賴文件的集合，像 vue.js, vue-router.js, axios.js, mint-ui.js 等

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

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

我們在 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 進(jìn)行引用，兩個 js 文件大約都是 31KB 左右，這里面節(jié)省了 140KB 左右的大小

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

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

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

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

{{ a }}

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

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