代码分离：动态导入

当涉及到动态代码拆分时，webpack 提供了两个类似的技术。第一种，也是推荐选 择的方式是，使用符合 ECMAScript 提案 的 import() 语法 来实现动态导入。第二 种，则是 webpack 的遗留功能，使用 webpack 特定的 require.ensure 。让我们 先尝试使用第一种

function getComponent() {
return import('lodash')
.then(({
default: _
}) => {
const element = document.createElement('div')
element.innerHTML = _.join(['Hello', 'webpack'], ' ')
return element
})
.catch((error) => 'An error occurred while loading the
component')
}
getComponent().then((component) => {
document.body.appendChild(component)
})

在入口文件中导入：

import './async-module'