Webpack：Lazy Loading懒加载，Chunk是什么？

最新推荐文章于 2024-12-13 15:30:00 发布

原创最新推荐文章于 2024-12-13 15:30:00 发布 · 914 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

122 篇文章

订阅专栏

博客介绍了Lazy Loading懒加载和Chunk的相关知识。Lazy Loading可通过import异步加载模块，提升页面加载速度；Chunk是webpack打包过程中生成的若干个js文件，每个js文件就是一个Chunk。

Lazy Loading懒加载

通过import异步加载一个模块。可以让页面加载速度更快

demo

function getComponent() {
    return import (/* webpackChunkName: "lodash" */ 'lodash').then(( {default: _} ) => {
        let ele = document.createElement('div');
        ele.innerHTML = _.join(['abc', 'def'], '-');
        return ele;
    })
}

document.addEventListener('click', () => {
    getComponent().then( (ele) => {
        document.body.appendChild(ele);
    } )    
});