【webpack】快速笔记16 -- Lazy Loading懒加载

如何优化

我们将index.js中的异步代码打开，并且注释掉同步代码，然后使用打包命令npm run start，成功打包后我们使用开发者工具中的Network，可以看出页面加载时已经同时加载了打包相关的代码：

我们不妨使用一个监听点击的函数来决定页面中DOM的挂载，所以我们index.js写成这样：

// 异步代码输出

function getComponent() {
    return import( /* webpackChunkName: "lodash" */ 'lodash').then(({
        default: _
    }) => {
        var dom = document.createElement('div');
        dom.innerHTML = _.join(['Copy', 'Splitting'], ' ');
        return dom;
    })
}

// 使用点击事件触发挂载DOM节点
document.addEventListener('click', () => {
    getComponent().then(dom => {
        document.body.appendChild(dom);
    })
})

此时我们再去运行npm run start，成功打包后我们发现bundle打包文件夹中依然还是那三个文件，此时我们打开页面去看Network，发现我们未点击页面之前，只加载了一个打包文件和静态页面index.html，而第三方插件lodash并没有载入进来：

此时只有我们触发点击事件时，才会去调用 getComponent() 的方法，也才会去执行lodash的异步导入，此时页面才回去载入 vendors~lodash.js 这个打包文件，这样也就形成了一个Lazy Loading懒加载模式，这相比与同步代码时直接引入的方式更有优化的地方~

似曾相识

场景：

如果使用过Vue/React这些框架的话，里面都是有路由跳转的概念，就好比一个SPA单页面应用，有首页模块、推荐页模块、购物车模块、个人中心模块等，此时我们把整个应用的代码打包上线而不去做分割时，那用户载入我们首页的时候，是不是都要加载我们这个应用逻辑压缩代码？这样肯定是不行的，所以就有了路由跳转的概念，只有我们切换到那个模块时才会去加载对应的逻辑代码，要实现这个肯定少不了在路由中进行异步加载的配置，然后配合webpack进行识别自动代码分割，这也算是Lazy Loading懒加载吧

那Lazy Loading懒加载是webpack里的一个概念吗？

其实并不是的，Lazy Loading懒加载是ES语法中提出的概念，而webpack只是能识别这种Import的语法进行相应的代码分割而已

结语

其实在webpack中关于Lazy Loading懒加载其实很常见也很实用，后面会不断实践，你会发现懒加载无处不在~

#下一篇【中看又中用的可视化打包分析工具~】