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)準，如果要兼容瀏覽器的話必須轉(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)文章
這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)移動端table表格簡單方法的相關(guān)資料,使用Vue.js開發(fā)移動應(yīng)用程序時,經(jīng)常需要使用各種UI組件,其中el-table是一個常用的表格組件,可以方便地展示數(shù)據(jù),需要的朋友可以參考下2023-09-09
解決vue項目運行提示W(wǎng)arnings while compiling.警告的問題
這篇文章主要介紹了解決vue項目運行提示W(wǎng)arnings while compiling.警告的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
一個uniapp小程序的項目,我們需要實現(xiàn)一個非常實用的功能——類似于錨點定位的交互效果,即在首頁中有多個tab（分類標(biāo)簽）,每個tab對應(yīng)著不同的模塊,當(dāng)用戶點擊某個分類的tab時,需要流暢地滾動到對應(yīng)的內(nèi)容位置,提供更好的用戶體驗,2023-10-10
前端vue?a鏈接下載文件失敗的問題(未發(fā)現(xiàn)文件)
這篇文章主要介紹了前端vue?a鏈接下載文件失敗的問題(未發(fā)現(xiàn)文件)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了uni-app在線預(yù)覽pdf文件的相關(guān)資料,本文主要介紹了如何在Vue項目中使用PDF.js插件進行PDF文件的預(yù)覽,包括插件的下載、版本兼容問題的處理,以及在static文件夾下新建pdf文件夾存放解壓文件,需要的朋友可以參考下2024-10-10
Vue 中 toRefs() 和 toRef() 的使用方法
在 Vue 3 中,toRefs()可以將響應(yīng)式對象的屬性轉(zhuǎn)換為可響應(yīng)的 refs,主要用于在解構(gòu)響應(yīng)式對象時,保持屬性的響應(yīng)性,這篇文章主要介紹了Vue 中 toRefs() 和 toRef() 的使用,需要的朋友可以參考下2025-01-01
這篇文章主要為大家詳細介紹了Vue生命周期和數(shù)據(jù)共享，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
解決vue組件銷毀之后計時器繼續(xù)執(zhí)行的問題
這篇文章主要介紹了解決vue組件銷毀之后計時器繼續(xù)執(zhí)行的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue3使用vuedraggable實現(xiàn)拖拽功能
這篇文章主要為大家詳細介紹了vue3使用vuedraggable實現(xiàn)拖拽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
權(quán)限是對特定資源的訪問許可，所謂權(quán)限控制，也就是確保用戶只能訪問到被分配的資源，這篇文章主要介紹了vue的權(quán)限管理的相關(guān)知識,需要的朋友可以參考下2022-06-06