webpack 的lazy Loading懒加载，Chunk是什么

课程目标

1. lazy Loding懒加载是什么?
2. 为什么使用懒加载?
3. 懒加载的好处
4. Chunk是什么?

一、lazy Loding懒加载是什么?

通过import异步加载一个模块。懒加载是es中的内容，并不是webpack的内容，只是webpack可以识别这种语法，在页面需要的那个模块的时候才回加载某个模块，按需引入，可以让页面加载速度更快

比如：

function getComponent() {
    return import (/* webpackChunkName: "lodash" */ 'lodash').then(( {default: _} ) => {
        let ele = document.createElement('div');
        ele.innerHTML = _.join(['abc', 'def'], '-');
        return ele;
    })
}
document.addEventListener('click', () => {//代表的是只有点击页面的时候才会运行代码
    getComponent().then( (ele) => {
        document.body.appendChild(ele)  ;
    } )    
})

三、懒加载的好处

1. 优化网页或应用的方式
2. 加快了应用的初始加载速度
3. 减轻了它的总体体积
4. 可以让页面加载速度更快

四、Chunk是什么?

在webpack打包过程中，生了若干个js文件，每一个js文件都叫做一个Chunk