webpack 懒加载

使用 import 的动态引入方式，实现代码分割并异步的加载相应的内容具体步骤如下

1、安装 @babel/plugin-syntax-dynamic-import

2、在 .babelrc 文件中配置

"plugins": [
  // 允许 babel 去翻译 import 异步加载文件
  "@babel/plugin-syntax-dynamic-import"
]

3、在文件中使用

// 异步引入 lodash 第三方文件
function getComponent () {
  return import(/* webpackChunkName: "lodash" */ 'lodash').then((_) => {
    const element = document.createElement('div')
    element.innerHTML = _.join(['tang', 'li', 'he'], '-');
    return element
  })
}

// 每次点击页面时，动态引入 lodash 第三方文件，并执行如下代码
document.addEventListener('click', () => {
  getComponent()
    .then((element) => {
      document.body.appendChild(element)
    })
}, false )