动态导入和懒加载

动态导入

假设有一个模块：

// module.js
export {
  a: 1,
  b: 2
}

静态导入

import {a, b} from './module.js'

静态导入是在JS引擎编译时(静态分析）执行，先于其他代码。

动态导入

async getModule() {
  const {a, b} = await import('./module.js')
}

动态导入是在JS运行时执行，ES6为了弥补静态导入的不足提供了import函数

import()返回一个Promise，value为module内容

import()类似require()，不过import()是异步加载，返回Promise，require()是同步加载，直接返回module

懒加载

webpack分包技术

const module = () => import('./module.js')

如果使用webpack，webpack会对import()异步加载的模块进行分包处理，即单独打包，而不是放在一个主包内，可以降低主包的体积，提高首屏渲染速度。

const module = () => import(/* webpackChunkName: 'module'  */ './module.js')

可以通过配置为分包命名，格式如上。

vue的异步组件技术

const component = () => import(/* webpackChunkName: 'component'  */ './component.vue')

Vue在注册组件时支持传入一个工厂函数，即返回一个Promise的函数，vue只有在加载该组件时才会调用该函数

所以结合import()和webpack分包技术可以实现组件的懒加载