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