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