Vue Router的懶加載路徑

單頁應用産出的入口chunk大小随着業務的複雜度線性增加，導緻後期加載速度越來越慢。後面就需要對不同路徑下的子產品進行拆分，打包到相應的chunk下，按需加載，找到chunk的大小、個數和頁面加載速度的平衡點。

解決辦法

.vue子產品檔案按需加載，其實要做到兩件事情：一是标記出這是一個異步元件；二是通知webpack把該元件單獨産出為一個chunk。

vue的異步元件

官網給出的異步元件寫法：異步元件是一個函數，函數的傳回值是一個Promise，隻是Promise的resolve函數的參數是正常元件的定義本身。

const AsyncCom = () => Promise.resolve({ /* component definition */ })           

複制

webpack異步子產品的引入辦法

這個對webpack不同的版本來說，用法有點差別：

webpack版本在1-2之間，可以使用require.ensure來告訴webpack引入了一個異步子產品

require.ensure([AYNC_MODULE_PATH],  CALLBACK, CHUNK_NAME)           

複制

其實require.ensure編譯後是一個叫_webpack_require_.e的函數，其本身是一個thenable執行個體，require.ensure的回調放到_webpack_require_.e.then(fn)裡面

為了滿足以上兩個條件

const AsyncCom = resolve => require.ensure([], () => resolve(require(AYNC_MODULE_PATH)), CHUNK_NAME);           

複制

webpack>=2的版本可以通過import()來指定動态引入的子產品

import('./A.vue') // returns a Promise           

複制

Vue Router中的懶加載路徑的使用辦法

// const A = resolve => require.ensure([], () => resolve(require('./a.vue')), 'A');
const A = () => import('./a.vue')

const router = new VueRouter({
  routes: [
    { path: '/a', component: A }
  ]
})           

複制

Tips

組合多個異步子產品到一個chunk檔案

對不同路徑進行按需加載，并不一定非得每個路徑産出一個chunk，這個還得按不同的業務和場景進行區分，有時候對于同一個業務下的的小異步子產品可以進行合并處理。在webapck版本>2.4時，可以在import引入的時候提供一個/* webpackChunkName: CHUNK_NAME*/注釋，來表示chunkname，

const A = () => import(/* webpackChunkName: "group-a-b-c" */ './a.vue')
const B = () => import(/* webpackChunkName: "group-a-b-c" */ './b.vue')
const C = () => import(/* webpackChunkName: "group-a-b-c" */ './c.vue')

// webpack.conf.js
output: {
         ......
        // 使用code-split産出的chunk檔案名
        chunkFilename: utils.assetsPath('js/[chunkname].[chunkhash].chunk.js'),
        ......
}           

複制