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);

    });

})

 

 

 

posted @ 2021-01-02 17:13  子不语-前端  阅读(55)  评论(0编辑  收藏  举报