Vue Router的懶載入路徑的解決方法

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

解決辦法

.vue模組檔案按需載入，其實要做到兩件事情：一是標記出這是乙個非同步元件；二是通知webpack把該元件單獨產出為乙個chunk。

vue的非同步元件

官網給出的非同步元件寫法：非同步元件是乙個函式，函式的返回值是乙個promise，只是promise的resolve函式的引數是常規元件的定義本身。

const asynccom = () => promise.resolve()

webpack非同步模組的引入辦法

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

webpack版本在1-2之間，可以使用require.ensure來告訴webpack引入了乙個非同步模組

require.ensure([aync_module_path], callback, chunk_name)

其實require.www.cppcns.comensure編譯後是乙個叫_webpack_require_.e的函式，其本身是乙個thenable例項，require.ensure的**放到_webpack_requirwww.cppcns.come_.e.then(fn)裡面

為了滿足以上兩個條件

const asynccom = resolve => require.ensure(, () => resolve(require(aync_module_path)), chunk_name);

webpack>=2的版本可以通過import()來指定動態引入的模組

import('./a.vue') // reldzzemnwstu程式設計客棧rns a promise

vue router中的懶載入路徑的使用辦法

// const a = resolve => require.ensure(, () => resolve(require('./a.vue')), 'a');

const a = () => import('./a.vue')

const router = new vuerouter(

]})tips

組合多個非同步模組到乙個chunk檔案

對不同路徑進行按需載入，並不一定非得每個路徑產出乙個chunk，這個還得按不同的業務和場景進行區分，有時候對於同乙個業務下的的小非同步模組可以進行合併處理。在webapck2.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')

ldzzemnwsconst c = () => import(/* webpackchunkname: "group-a-b-c" */ './c.vue')

// webpack.conf.js

output:

總結本文標題: vue router的懶載入路徑的解決方法

本文位址:

Vue Router的懶載入路徑的解決方法

vue router 路由懶載入

Vue Router（路由懶載入）

vue router路由懶載入

Vue Router的懶載入路徑的解決方法

vue router 路由懶載入

Vue Router（路由懶載入）

vue router路由懶載入

相關推薦