您好,登錄后才能下訂單哦!
這篇文章給大家介紹vue-router實現(xiàn)路由懶加載的方法有哪些,內(nèi)容非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對大家能有所幫助。
什么是路由懶加載?
也叫延遲加載,即在需要的時候進(jìn)行加載,隨用隨載。
官方解釋:
1:當(dāng)打包構(gòu)建應(yīng)用時,JavaScript 包會變得非常大,影響頁面加載。
2:如果我們能把不同路由對應(yīng)的組件分割成不同的代碼塊,然后當(dāng)路由被訪問的時候才加載對應(yīng)組件,這樣就更加高效了。
官方在說什么呢?為什么需要懶加載?
1:首先,我們知道路由中通常會定義很多不同的頁面。
2:這個頁面這項目build打包后,一般情況下,會放在一個單獨的js文件中
3:但是,如果很多的頁面都放在同一個js文件中,必然會造成這個頁面非常大
4:如果我們一次性的從服務(wù)器中請求下來這個頁面,可能會花費一定時間,用戶體驗不好
5:如何避免這種情況發(fā)生呢?使用路由懶加載就可以了
繼續(xù)解釋原由?
1:像vue這種單頁面應(yīng)用,如果沒有應(yīng)用懶加載,運用webpack打包后的文件將會異常的大。
2:造成進(jìn)入首頁時,需要加載的內(nèi)容過多,時間過長,會出啊先長時間的白屏,即使做了loading也是不利于用戶體驗。
3:而運用懶加載則可以將頁面進(jìn)行劃分,需要的時候加載頁面,可以有效的分擔(dān)首頁所承擔(dān)的加載壓力,減少首頁加載用時
也就是說:進(jìn)入頁面不用也不需要一次性加載過多資源造成加載時間過程!
路由懶加載做了什么事情?
1:主要作用是將路由對應(yīng)的組件打包成一個個的js代碼塊
2:只有在這個路由被訪問到的時候,才加載對應(yīng)的組件,否則不加載!
即:只有在這個路由被訪問到的時候,才加載對應(yīng)的組件,否則不加載!
1:.如何實現(xiàn)路由懶加載??
vue項目實現(xiàn)路由按需加載(路由懶加載)的三種方式:
1:Vue異步組件
2:ES6標(biāo)準(zhǔn)語法import()---------推薦使用?。。。?!
3:webpack的require,ensure()
2.Vue異步加載技術(shù)
1:vue-router配置路由,使用vue的異步組件技術(shù),可以實現(xiàn)懶加載,此時一個組件會生成一個js文件。
2:component: resolve => require(['放入需要加載的路由地址'], resolve)
{ path: '/problem', name: 'problem', component: resolve => require(['../pages/home/problemList'], resolve) }
3.ES6推薦方式imprort ()----推薦使用
1:直接將組件引入的方式,import是ES6的一個語法標(biāo)準(zhǔn),如果需要瀏覽器兼容,需要轉(zhuǎn)化成es5的語法。
2:推薦使用這種方式,但是注意wepack的版本>2.4
3:vue官方文檔中使用的也是import實現(xiàn)路由懶加載
4:上面聲明導(dǎo)入,下面直接使用
import Vue from 'vue'; import Router from 'vue-router'; // 官網(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') export default new Router({ routes: [ { path: '/Foo', name: 'Foo', component: Foo }, { path: '/Aoo', name: 'Aoo', component: Aoo } ] })
4.webpack提供的require.ensure()實現(xiàn)懶加載:
1:vue-router配置路由,使用webpack的require.ensure技術(shù),也可以實現(xiàn)按需加載。
2:這種情況下,多個路由指定相同的chunkName,會合并打包成一個js文件。
3:require.ensure可實現(xiàn)按需加載資源,包括js,css等。他會給里面require的文件單獨打包,不會和主文件打包在一起。
4:第一個參數(shù)是數(shù)組,表明第二個參數(shù)里需要依賴的模塊,這些會提前加載。
5:第二個是回調(diào)函數(shù),在這個回調(diào)函數(shù)里面require的文件會被單獨打包成一個chunk,不會和主文件打包在一起,這樣就生成了兩個chunk,第一次加載時只加載主文件。
6:第三個參數(shù)是錯誤回調(diào)。
7:第四個參數(shù)是單獨打包的chunk的文件名
此處代碼參考原文鏈接:https://blog.csdn.net/qq_41998083/article/details/109726402
import Vue from 'vue'; import Router from 'vue-router'; const HelloWorld=resolve=>{ require.ensure(['@/components/HelloWorld'],()=>{ resolve(require('@/components/HelloWorld')) }) } Vue.use('Router') export default new Router({ routes:[{ {path:'./', name:'HelloWorld', component:HelloWorld } }] })
4.import和require的比較(了解)
1:import 是解構(gòu)過程并且是編譯時執(zhí)行
2:require 是賦值過程并且是運行時才執(zhí)行,也就是異步加載
3:require的性能相對于import稍低,因為require是在運行時才引入模塊并且還賦值給某個變量
關(guān)于vue-router實現(xiàn)路由懶加載的方法有哪些就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。