（一）当前处于的状态
我们使用codeSplitting分割代码实际上是通过缓存的优势去减少第二次加载资源是的时长。但通过缓存优化这种方式能起到的效果是非常有限的。我们的目的是缩短首页白屏时间。即初次加载页面时就缩短加载时间。
回顾一下：
- splitChunks默认是aysnc
- aysnc时，异步到白：自动打包到一个文件中，不需要配置
- all时，同步异步一起打包
（二）优化代码的实质
实质：代码利用率的提高
为什么splitChunks默认是aysnc？
因为webpack觉得同步通过分割缓存打包对性能能影响很小，
如何查看代码利用率？
- 在控制台中
cmd+shift+p输入coverage并选中Show Coverage
[图片上传失败...(image-b6518-1613817193089)]
- 点击录制可查看，可以卡到加载大小、利用率
[图片上传失败...(image-cf25b3-1613817193090)]
利用率越高说明性能越好
[图片上传失败...(image-531783-1613817193090)]
如何提升利用率？
多写异步代码
[图片上传失败...(image-59f5b3-1613817193090)]
[图片上传失败...(image-cd0fc3-1613817193090)]
加入魔法注释实现偷偷加载
[图片上传失败...(image-f83e8e-1613817193090)]
（三）典型场景
在某个网站中，加载首页时点击登录的逻辑可以放到点击登录后进行获取加载js文件。
[图片上传失败...(image-797778-1613817193090)]
（四）Prefetching/Preloading的区别
Prefetching 等到主流程结束之后偷偷加载
Preloading 跟主流程一起加载
减少了加载主流程时的白屏时间，在宽带网速通畅时还可以继续加载暂时未时代的js。
