Lazy Loading webpack学习笔记(十)

通过Import去异步的加载这个模块,但是到底什么时候去加载这个模块,实际上是不一定的,要看自己的代码怎么写;

好处是:加载速度会快;

比如说我们现在的打包后的目录:

我们运行程序

//index.js文件中

async function getComponent() {

    //import这种语句返回的是promise类型

    const { default: _ } = await import(/* webpackChunkName:"lodash" */ 'lodash');

    const element = document.createElement('div');

    element.innerHTML = _.join(['Dell', 'Lee'], '-');

    return element;

}

 

document.addEventListener('click', () =>{

    getComponent().then(element => {

        document.body.appendChild(element);

    });

})

 

原文地址:https://www.cnblogs.com/gaobingjie/p/14223334.html