按需import提案幾年前就已提出，如今終于能進入ES正式規范。這里個人理解成“按需”更為貼切。現代前端打包資源越來越大，打包成幾M的JS資源已成常態，而往往前端應用初始化時根本不需要全量加載邏輯資源，為了首屏渲染速度更快，很多時候都是按需加載，比如懶加載圖片等。而這些按需執行邏輯資源都體現在某一個事件回調中去加載。

// 點擊按鈕才去加載ajax模塊 const oBtn = document.querySelector('#btn') oBtn.addEventListener('click', () => {import('./ajax').then(mod => {mod.get('static/a.json', res => {console.log(res)})}) })

當然，webpack目前已很好的支持了該特性。

Vue 中組件按需加載：

const routes = [{path: '/',name: 'User',component: User}, {path: '/upload',name: 'Upload',component: () => import('../views/Upload.vue')} ]

總結

以上是生活随笔為你收集整理的【ES11(2020)】Dynamic Import 动态引入的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。