Vue.js路由懶加載[譯]

做者：Joshua Bemenderfer

原文地址: lazy-loading-routes

譯者：jeneser

當你的SPA（單頁應用程序）變得複雜時，打包構建後的Javascript包會變得很是大，以致於嚴重影響頁面的加載時間。幸運的是：vue-router支持WebPack內置的異步模塊加載系統。因此，那些使用較少的路由組件沒必要打包進bundles裏，只須要在路由被訪問時按需加載。

使用

假設你的路由配置是這樣的：

import MainPage from './routes/MainPage.vue'
import OtherMassivePage from './routes/OtherMassivePage.vue'

const routes = [
  { path: '/main', component: MainPage },
  { path: '/other', component: OtherMassivePage }
]

簡單來講，你可使用require.ensure來替代import。它能幫你將OtherMassivePage組件以及該組件的全部依賴分割到一個單獨的chunk中去。

如今重啓你的應用，你會發現並無什麼改變。但，當你打開開發人員工具，選擇檢查網絡，再一次訪問/other路徑時，你會看到一個新的文件被加載進來。

import MainPage from './routes/MainPage.vue'
const OtherMassivePage = r => require.ensure([], () => r(require('./routes/OtherMassivePage.vue')))

const routes = [
  { path: '/main', component: MainPage },
  { path: '/other', component: OtherMassivePage }
]

是的，這看起來是有點奇怪，相信我，它並非那麼糟糕。

還有一種方法是將路由對應的組件定義成異步組件。寫起來像這樣：

const OtherMassivePage = resolve => {
  // 空數組用來指定該路由組件須要加載的依賴
  require.ensure([], () => {
    resolve(require('./routes/OtherMassivePage.vue'))
  })
}

不過，你最好不要使用這種包裹起來的寫法，由於WebPack會使用靜態分析來檢測和分割塊。比較好的作法是，將他們寫成一行以減小空間的佔用。

按組分塊

有時候咱們想把某個路由下的全部組件都打包在同個異步 chunk 中。只須要 給 chunk 命名，提供require.ensure第三個參數做爲 chunk 的名稱：

// 這兩條路由被打包在相同的塊中，訪問任一路由都會延遲加載該路由組件
const OtherMassivePage = r => require.ensure([], () => r(require('./routes/OtherMassivePage.vue')), 'big-pages')
const WeightLossPage = r => require.ensure([], () => r(require('./routes/WeightLossPage.vue')), 'big-pages')

不像許多其餘的WebPack任務，這個方法出乎意料的簡單，而且能產生意想不到的有用結果。若是你正在維護那些變得臃腫不堪的大型單頁應用，我會堅決果斷的將這種方法推薦給你。

End

做者：Joshua Bemenderfer

原文地址: lazy-loading-routes

譯者：jeneser

譯者GitHub：https://github.com/jeneser

版權聲明：自由轉載-非商用-非衍生-保持署名（創意共享3.0許可證）

勘誤&討論： New issue