Vue中使用import進(jìn)行路由懶加載的原理分析
更新時(shí)間：2022年04月01日 11:57:02 作者：qq_36437172
這篇文章主要介紹了Vue中使用import進(jìn)行路由懶加載的原理分析。具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
使用import進(jìn)行路由懶加載的原理
首先我們來說說，import 和 require 的區(qū)別
node 編程中最重要的思想就是模塊化，import 和 require 都是被模塊化所使用。
（1）遵循規(guī)范
require是 AMD規(guī)范引入方式import是es6的一個(gè)語法標(biāo)準(zhǔn)，如果要兼容瀏覽器的話必須轉(zhuǎn)化成es5的語法
（2）調(diào)用時(shí)間
require是運(yùn)行時(shí)調(diào)用，所以require理論上可以運(yùn)用在代碼的任何地方import是編譯時(shí)調(diào)用，所以必須放在文件開頭
（3）本質(zhì)
require是賦值過程，其實(shí)require的結(jié)果就是對象、數(shù)字、字符串、函數(shù)等，再把require的結(jié)果賦值給某個(gè)變量import是解構(gòu)過程，但是目前所有的引擎都還沒有實(shí)現(xiàn)import，我們在node中使用babel支持ES6，也僅僅是將ES6轉(zhuǎn)碼為ES5再執(zhí)行，import語法會(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)的組件。
可以理解也是為通過Promise的resolve機(jī)制。因?yàn)镻romise函數(shù)返回的Promise為resolve組件本身，而我們又可以使用import來導(dǎo)入組件。
注意：import會(huì)返回一個(gè)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"]
}以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)移動(dòng)端table表格簡單方法
這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)移動(dòng)端table表格簡單方法的相關(guān)資料,使用Vue.js開發(fā)移動(dòng)應(yīng)用程序時(shí),經(jīng)常需要使用各種UI組件,其中el-table是一個(gè)常用的表格組件,可以方便地展示數(shù)據(jù),需要的朋友可以參考下2023-09-09
解決vue項(xiàng)目運(yùn)行提示W(wǎng)arnings while compiling.警告的問題
這篇文章主要介紹了解決vue項(xiàng)目運(yùn)行提示W(wǎng)arnings while compiling.警告的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
UniApp中實(shí)現(xiàn)類似錨點(diǎn)定位滾動(dòng)效果
一個(gè)uniapp小程序的項(xiàng)目,我們需要實(shí)現(xiàn)一個(gè)非常實(shí)用的功能——類似于錨點(diǎn)定位的交互效果,即在首頁中有多個(gè)tab（分類標(biāo)簽）,每個(gè)tab對應(yīng)著不同的模塊,當(dāng)用戶點(diǎn)擊某個(gè)分類的tab時(shí),需要流暢地滾動(dòng)到對應(yīng)的內(nèi)容位置,提供更好的用戶體驗(yàn),2023-10-10
前端vue?a鏈接下載文件失敗的問題(未發(fā)現(xiàn)文件)
這篇文章主要介紹了前端vue?a鏈接下載文件失敗的問題(未發(fā)現(xiàn)文件)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了uni-app在線預(yù)覽pdf文件的相關(guān)資料,本文主要介紹了如何在Vue項(xiàng)目中使用PDF.js插件進(jìn)行PDF文件的預(yù)覽,包括插件的下載、版本兼容問題的處理,以及在static文件夾下新建pdf文件夾存放解壓文件,需要的朋友可以參考下2024-10-10
Vue 中 toRefs() 和 toRef() 的使用方法
在 Vue 3 中,toRefs()可以將響應(yīng)式對象的屬性轉(zhuǎn)換為可響應(yīng)的 refs,主要用于在解構(gòu)響應(yīng)式對象時(shí),保持屬性的響應(yīng)性,這篇文章主要介紹了Vue 中 toRefs() 和 toRef() 的使用,需要的朋友可以參考下2025-01-01
這篇文章主要為大家詳細(xì)介紹了Vue生命周期和數(shù)據(jù)共享，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
解決vue組件銷毀之后計(jì)時(shí)器繼續(xù)執(zhí)行的問題
這篇文章主要介紹了解決vue組件銷毀之后計(jì)時(shí)器繼續(xù)執(zhí)行的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue3使用vuedraggable實(shí)現(xiàn)拖拽功能
這篇文章主要為大家詳細(xì)介紹了vue3使用vuedraggable實(shí)現(xiàn)拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
權(quán)限是對特定資源的訪問許可，所謂權(quán)限控制，也就是確保用戶只能訪問到被分配的資源，這篇文章主要介紹了vue的權(quán)限管理的相關(guān)知識(shí),需要的朋友可以參考下2022-06-06