学习webpack【第四章-高级概念2】

一、Lazy loading 懒加载是什么

二、chunk是什么

三、打包分析、preloading、prefetching

——————————————————

一、Lazy loading 懒加载，chunk是什么

通过import异步加载可以实现懒加载的效果，就是说只有需要加载的时候才去加载， 而不是一次性全加载过来

image.png

es7的写法

image.png

优点：页面运行速度更快

懒加载不是webpack里面的概念，而是ECMAScript的一个概念，他 提出了import 这个实现性质的语法
所以说懒加载跟webpack 关系不大，他只不过是可以识别出import的语法，并对其进行代码分割而已

二、chunk是什么

打包后的每一个js文件都是一个chunk

image.png image.png image.png

minChunks的意思是，比如现在要对lodash进行代码分割，会首先看在打包后的文件中 如果有两个或两个以上都用到了lodash才去进行代码分割，将lodash单独生成一个文件。

三、打包分析、preloading、prefetching

打包分析推荐：webpack-bundle-analyzer

背景：最开始是所有资源都是一次性加载过来的很不友好， 于是有了代码分割，而代码分割主要是代码必须是异步的才能真正意义上优化网页加载速度， 否则都是只是依靠缓存来实现的。 当有了异步的分割， 比如当我点击某个元素的时候才去加载对应的那部分的代码，会有一个问题， 既只有点击的时候才加载， 这样有可能会造成一个反应慢的情况， 这时候可以这样想，当该加载完的已经加载好了以后， 当网络空闲的时候去加载这部门代码这样就完美了。 这种实现需要借助preloading和prefetching。

具体实现：

image.png

prefetch: 是等到核心的主流程代码都加载以后，再去加载
preload:是和核心代码一起加载的

总结： 一个前端对提升网页性能应该从code coverage 考虑， 而不是缓存， 缓存能提升的性能是非常有限的