ES11(2020)Dynamic Import 动态引入

Posted 2022-12-05 优小U

按需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')
  
]