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

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

// 有一個(gè) test 的組件



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

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

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

import a from "a.jpg"

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

// app.vue

  

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

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

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

include: 只有匹配的組件會(huì)被緩存

exclude: 任何匹配的組件都不會(huì)被緩存

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

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

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

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

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

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

2018.01.15 更新

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

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

A -> B

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

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

B -> A (不緩存)

A -> B

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

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

解決方案：

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

2018.01.17 更新

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

比如，t1 組件是要緩存的

  

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

每次要去到 t1 頁面，對(duì)頁面設(shè)置為緩存。然后在 t1 頁面要跳去其他頁面時(shí)候，判斷是否需要緩存頁面，如果不需要，修改 array 這個(gè)值。而這個(gè) 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)入某個(gè)頁面，會(huì)按需加載 js 文件，有效地降低首屏文件大小

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

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

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

上面的操作都是為了提高用戶的體驗(yàn)，這個(gè)要看情況而定了

使用代碼分割，文件的大小，會(huì)稍微比不用的時(shí)候大一點(diǎn)

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

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

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

我們?cè)?index.html 引入兩個(gè) js

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

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

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

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

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

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

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

在 ngrok 里運(yùn)行時(shí)，會(huì)運(yùn)行得更快（測(cè)試過）

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

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

{{ a }}

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

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