Vue實現(xiàn)路由懶加載的多種方式總結

更新時間：2023年11月14日 11:14:46 作者：mieRui

當構建的項目比較大的時候,懶加載可以分割代碼塊,提高頁面的初始加載效率解決白屏問題,下面是幾種常見vue路由懶加載的方法,感興趣的朋友跟隨小編一起看看吧

一、為什么需要路由懶加載

vue在項目打包/構建(一般是npm run build 具體看package.json文件)之后，會生成一個dist文件夾。在dist文件夾里面又有一個js/app.js文件，這里主要存放的是整個項目的業(yè)務邏輯代碼。隨著項目不斷的開發(fā)迭代，業(yè)務邏輯越來越多，app.js文件也會越來越大。在線上就會容易出現(xiàn)進入首頁時所需時間過長或者出現(xiàn)白屏的問題

這會是影響加載時間的重要因數(shù)。當構建的項目比較大的時候，懶加載可以分割代碼塊，提高頁面的初始加載效率解決白屏問題。下面是幾種常見vue路由懶加載的方法

1.ES6推薦方式imprort ()----推薦使用

// 官網(wǎng)可知：下面沒有指定webpackChunkName，每個組件打包成一個js文件。
const Foo = () => import('../components/Foo')
const Aoo = () => import('../components/Aoo')
// 下面2行代碼，指定了相同的webpackChunkName，會合并打包成一個js文件。
const Foo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/Foo')
const Aoo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/Aoo')

2 webpack提供的require.ensure()實現(xiàn)懶加載

1：這種情況下，多個路由指定相同的chunkName，會合并打包成一個js文件。

2：require.ensure可實現(xiàn)按需加載資源，包括js,css等。他會給里面require的文件單獨打包，不會和主文件打包在一起。

3：第一個參數(shù)是數(shù)組，表明第二個參數(shù)里需要依賴的模塊，這些會提前加載。

4：第二個是回調函數(shù),在這個回調函數(shù)里面require的文件會被單獨打包成一個chunk,不會和主文件打包在一起，這樣就生成了兩個chunk,第一次加載時只加載主文件。

5：第三個參數(shù)是錯誤回調。

6：第四個參數(shù)是單獨打包的chunk的文件名

import Vue from 'vue';
import Router from 'vue-router';
Vue.use('Router')
export default new Router({
    routes:[{
    {path:'./',
    name:'HelloWorld',
    component: r => require.ensure([], () => r(require('@/components/home')), 'demo')
    }
    }]
})

3.使用vue異步組件resolve

這一種方法比較常見。它主要是使用了resolve的異步機制，用require代替了import,實現(xiàn)按需加載，下面是代碼示例

//const 組件名 = resolve => require([‘組件路徑'],resolve)
//（這種情況下一個組件生成一個js文件）
const home = resolve => require(['../view/home'],resolve)

4.import和require的比較（了解）

import 是解構過程并且是編譯時執(zhí)行

require 是賦值過程并且是運行時才執(zhí)行，也就是異步加載

require的性能相對于import稍低，因為require是在運行時才引入模塊并且還賦值給某個變量

命令	規(guī)范	調用	本質	特點
require	CommonJS規(guī)范	運行時調用	賦值過程	非語言層面的標準。社區(qū)方案，提供了服務器/瀏覽器的模塊加載方案。只能在運行時確定模塊的依賴關系及輸入/輸出的變量，無法進行靜態(tài)優(yōu)化。
import	es6+的語法標準	編譯時調用	解構過程	語言規(guī)格層面支持模塊功能。支持編譯時靜態(tài)分析，便于JS引入宏和類型檢驗。動態(tài)綁定