如何优化
我们将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懒加载其实很常见也很实用,后面会不断实践,你会发现懒加载无处不在~
#下一篇【中看又中用的可视化打包分析工具~】