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 分好多隻主要是因為整包太肥,不希望使用者一連進來就要等好久才看得到畫面。

留言

這個網誌中的熱門文章

[Android] 筆記 手機上測試自己的 APP

解決fatal: Not a git repository (or any of the parent directories): .git錯誤

[Android 筆記] 設定 ImageView 的圖檔來源