webpack系统学习（五）Lazy Loading 懒加载

什么是懒加载？

当我们使用import异步导入一个模块的时候，其实就是懒加载，只有当我们执行到该import语句的时候，才会加载该模块。

//index.js
function getComponent(){
  return import(/* webpackChunkName:"lodash" */'lodash').then(({default: _ })=>{
    var ele = document.createElement('div')
    ele.innerHTML = _.join(['Niall','August'],' ')
    return ele
  })
}

document.addEventListener('click',()=>{
  getComponent().then( ele => {
    document.body.appendChild(ele)
  })
})

对index.js打包之后，我们发现生成了两个js文件：

当我们打开index.html后，如果不点击页面，那么网络资源请求就不会存在vendors~lodash.js的加载，当点击页面，触发响应后，才会请求vendors~lodash.js。
点击前：

点击后：