dynamic import--动态导入（Lazy-loding懒加载和Chunk）

Code splitting 可用于：

• 模块级别
• 路由级别

通过在导入路径前面加上魔法注释/ * webpackChunkName：“ name_here” * /，可以更改块名称

const getUserModule = () =>
  import(/* webpackChunkName: "usersAPI" */ "./common/usersAPI");
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
  getUserModule().then(({ getUsers }) => {
    getUsers().then(json => console.log(json));
  });
});

借助一个插件，完成对import语法的识别

cnpm install --save-dev @babel/plugin-syntax-dynamic-import

再.babelrc文件下配置，增加一个插件

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

如下：

// create.js
async function create() {
    const {
        default: _
    } = await import(/*webpackChunkName:"lodash"*/'lodash')
    let element = document.createElement('div')
    element.innerHTML = _.join(['TianTian', 'lee'], '-')
    return element
}

function demo() {
    document.addEventListener('click', function () {
        create().then(element => {
            document.body.appendChild(element)
        })
    })
}

export default demo;