二十三（2）懒加载的概念 ------ 2019-07-14

一、代码：

async function getComponent() {
    const {
        default: _
    } =
    await import('lodash')
    const element = document.createElement('div');
    element.innerHTML = _.join(['Dell', 'Lee'], '-');
    return element;
}
document.addEventListener('click', () => {
    getComponent().then(element => {
        document.body.appendChild(element);
    })
})

这段代码的意思，首先定义了一个异步函数getComponent，在函数getComponent里通过import语法导入lodash模块，然后使用了lodash模块创建了一个div标签，最后通过body点击事件，将创建的div添加到document中；

二、当我们打包代码运行时会发现，lodash模块被分割成了单独的文件，

image.png

当我们打包好以后，运行项目时会发现，页面加载的时候，只加载了mai getComponent() {
const {
default: _
} =
await import('lodash')
const element = document.createElement('div');
element.innerHTML = _.join(['Dell', 'Lee'], '-');
return element;
}
document.addEventListener('click', () => {
getComponent().then(element => {
document.body.appendChild(element);
})
})

这段代码的意思，首先定义了一个异步函数getComponent，在函数getComponent里通过import语法导入lodash模块，然后使用了lodash模块创建了一个div标签，最后通过body点击事件，将创建的div添加到document中；

二、当我们打包代码运行时会发现，lodash模块被分割成了单独的文件，
![image.png](https://upload-images.jianshu.io/upload_images/8436665-c8a658aa79ea055e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
当我们打包好以后，运行项目时会发现，页面加载的时候，只加载了main.js,只有当我们执行点击事件的时候，vendors.js才会加载；这就是所谓的懒加载，可以有效的降低页面的初始化时间和加载速度；