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

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

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

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

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

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

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

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

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

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

5：第三個(gè)參數(shù)是錯(cuò)誤回調(diào)。

6：第四個(gè)參數(shù)是單獨(dú)打包的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的異步機(jī)制，用require代替了import,實(shí)現(xiàn)按需加載，下面是代碼示例

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

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

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

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

require的性能相對(duì)于import稍低，因?yàn)閞equire是在運(yùn)行時(shí)才引入模塊并且還賦值給某個(gè)變量

關(guān)于規(guī)范

import是es6的一個(gè)語(yǔ)法標(biāo)準(zhǔn)，如果要兼容瀏覽器的話必須轉(zhuǎn)化成es5的語(yǔ)法。

到此這篇關(guān)于Vue實(shí)現(xiàn)路由懶加載的多種方式總結(jié)的文章就介紹到這了,更多相關(guān)Vue路由懶加載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論