Vue中使用import進(jìn)行路由懶加載的原理分析
更新時(shí)間：2022年04月01日 11:57:02 作者：qq_36437172
這篇文章主要介紹了Vue中使用import進(jìn)行路由懶加載的原理分析。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
使用import進(jìn)行路由懶加載的原理
首先我們來(lái)說(shuō)說(shuō)，import 和 require 的區(qū)別
node 編程中最重要的思想就是模塊化，import 和 require 都是被模塊化所使用。
（1）遵循規(guī)范
require是 AMD規(guī)范引入方式import是es6的一個(gè)語(yǔ)法標(biāo)準(zhǔn)，如果要兼容瀏覽器的話必須轉(zhuǎn)化成es5的語(yǔ)法
（2）調(diào)用時(shí)間
require是運(yùn)行時(shí)調(diào)用，所以require理論上可以運(yùn)用在代碼的任何地方import是編譯時(shí)調(diào)用，所以必須放在文件開頭
（3）本質(zhì)
require是賦值過(guò)程，其實(shí)require的結(jié)果就是對(duì)象、數(shù)字、字符串、函數(shù)等，再把require的結(jié)果賦值給某個(gè)變量import是解構(gòu)過(guò)程，但是目前所有的引擎都還沒有實(shí)現(xiàn)import，我們?cè)趎ode中使用babel支持ES6，也僅僅是將ES6轉(zhuǎn)碼為ES5再執(zhí)行，import語(yǔ)法會(huì)被轉(zhuǎn)碼為require
在路由中，我們?nèi)绾问褂脩屑虞d呢？
export default new VueRouter({
? ? routes: [
? ? ? ? {
? ? ? ? ? ? path: '/',
? ? ? ? ? ? component: () => import('../components/Navigator')
? ? ? ? }
? ? ]
})使用路由懶加載的寫法，只會(huì)在進(jìn)入當(dāng)前這個(gè)路由時(shí)候才會(huì)走 component ，然后在運(yùn)行import編譯加載相應(yīng)的組件。
可以理解也是為通過(guò)Promise的resolve機(jī)制。因?yàn)镻romise函數(shù)返回的Promise為resolve組件本身，而我們又可以使用import來(lái)導(dǎo)入組件。
注意：import會(huì)返回一個(gè)Promise對(duì)象。
setTimeout(() => {
? ? import('./dynamic-data.js').then(res => {
? ? ? ? console.log(res.default.message)
? ? })
}, 1500)
// dynamic-data.js
export default {
? ? message: 'this is message'
}vue路由懶加載，使用import無(wú)法處理
問題原因：import屬于異步引用組件，需要特殊的babel-loader處理
解決
npm i babel-plugin-syntax-dynamic-import -D
在 .bablerc中引入syntax-dynamic-import插件
{
?? ?"presets": ["env"],
?? ?"plugins": ["syntax-dynamic-import"]
}以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vuejs簡(jiǎn)單驗(yàn)證碼功能,結(jié)合完整實(shí)例形式分析了vue.js驗(yàn)證碼的生成、顯示、校驗(yàn)等相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
這篇文章主要介紹了基于Vue實(shí)現(xiàn)微前端的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
vue?目錄樹的展開與關(guān)閉的實(shí)現(xiàn)
Vue作為一款流行的前端框架,提供了一種數(shù)據(jù)驅(qū)動(dòng)的方式來(lái)實(shí)現(xiàn)目錄樹,本文主要介紹了vue?目錄樹的展開與關(guān)閉的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2023-11-11
關(guān)于新建的vue3項(xiàng)目一直提示代碼格式警告的問題
這篇文章主要介紹了關(guān)于新建的vue3項(xiàng)目一直提示代碼格式警告的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue-router vuex-oidc動(dòng)態(tài)路由實(shí)例及功能詳解
這篇文章主要為大家介紹了vue-router vuex-oidc動(dòng)態(tài)路由實(shí)例及功能詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
vue 使用async寫數(shù)字動(dòng)態(tài)加載效果案例
這篇文章主要介紹了vue 使用async寫數(shù)字動(dòng)態(tài)加載效果案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
本篇文章主要介紹了Vue2 SSR 緩存 Api 數(shù)據(jù)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
這篇文章主要介紹了vue 子組件watch監(jiān)聽不到prop的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
這篇文章主要為大家詳細(xì)介紹了Vue下拉選擇框Select組件的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
computed作為計(jì)算屬性其作用是描述響應(yīng)式數(shù)據(jù)的復(fù)雜邏輯計(jì)算，當(dāng)所依賴的響應(yīng)式數(shù)據(jù)發(fā)生改變時(shí)計(jì)算屬性會(huì)重新計(jì)算，更新邏輯計(jì)算的結(jié)果，這篇文章主要介紹了Vue.js中的computed的功能設(shè)計(jì),需要的朋友可以參考下2023-06-06