Vue Router 實作按需加載，將 JavaScript 拆成好幾隻

一開始使用 Vue 寫 Single Page Application (SPA)，頁面越來越多時，編譯出來的 build.js 越來越肥，覺得這樣 request 時 loading 蠻吃緊的，最高甚至到了 3MB 以上，雖然有 nginx 的 gzip 在前面擋著，不過還是有其他方式可以盡量減少檔案大小，因此就打算針對某些 routes 做成按需加載，也就是有走到某個頁面時，再加載該頁面的 JavaScript。

*我的專案是 Vue2 / Webpack2 / Vue-Router
1.  首先要在 routes 的 import 寫法改一下，把需要按需加載的頁面，改成 resolve require 的方式:

/*
import Home from '../pages/Home'
import Product from '../pages/Product'
import Search from '../pages/Search'
*/
// 改成
const Home = resolve => require(['../pages/Home'], resolve)

const Product = resolve => require(['../pages/Product'], resolve)

const Search = resolve => require(['../pages/Search'], resolve)

如果是 webpack2 可以寫成

const Home = () => System.import('../pages/Home')

2. 接著記得要在 webpack 的設定，加上 publicPath 的設定，這樣做當需要按需加載時，才知道網址要怎麼帶，否則網址會是錯的。output.publicPath 怎麼寫可以參考哦! 。

假如 publicPath 沒辦法 hard code 在 webpack 設定怎麼辦?  因為每個人開發機的網址可能都不同，這邊的替代方案叫做 configuring webpack public path at runtime，也就是不要把 publicPath 設定寫在 webpack, 改為寫在程式裡，當程式要 build 的時候，動態設定 publicPath，怎麼做呢?

在 main.js 加上:

__webpack_public_path__ = `${SiteConfig.DOMAIN}front/build/`;

這個部分可以參考。看有沒有需要再用 XD

完成這些設定就可以重跑看看 webpack build/watch
會發現檔案會用數字拆開成好幾隻

[僅為示意]
                     4.js   169 kB       4  [emitted]
                     5.js  20.9 kB       5  [emitted]
                     6.js  11.8 kB       6  [emitted]
                     7.js  11.8 kB       7  [emitted]

接著打開瀏覽器，走訪一下那些改為 resolve require 的網頁路徑，就會看到他們會額外加載那一頁的 JavaScript (至於數字是怎麼安排的我也不知道就是惹 XD)



參考
https://router.vuejs.org/en/advanced/lazy-loading.html
vue-router 三种加载方式速度评测 http://meiminjun.github.io/vue-router/

假如一開始檔案就小小的，也不必要走這種 code split 的方式，load 一隻 build.js 的好處就是只會發一次 request XD 分好多隻主要是因為整包太肥，不希望使用者一連進來就要等好久才看得到畫面。