复习webpack4之打包分析,Preloading,Prefetching

以前学习过webpack3的知识，可是webpack4升级后仍是有不少变更的，因此此次从新整理一下webpack4的知识点，方便之后复习。

此次学习webpack4不单单要会配置，记住核心API，最好还要理解一下webpack更深层次的知识，好比打包原理等等，因此可能会省略一些比较基础的内容，可是但愿我能够经过这次学习掌握webpack，更好地应对之后的工做。

1.打包分析

根据官方文档，咱们可使用命令行配置webpack --profile --json > stats.json，把打包过程的描述生成到stats.json中。

而后进行一次打包。打包完成后，咱们会发现目录下多了一个stats.json，这个文件就是对打包过程的描述，若是咱们看描述文件去分析打包流程会比较麻烦，因此咱们要借助一些工具来分析。

进入到http://webpack.github.com/analyse，上传刚刚生成的json文件。

会出现图示中的信息，显示了webpack版本是4.30.0，打包耗时20702毫秒，hash值，以及引用了46个modules，生成了2个chunk，生成了5个静态文件，没有警告和异常。

点击modules，还能够看到包之间的关系。

除了这个工具，文档中还提供了几个其余的工具。

若是须要使用的话，就能够看对应文档，进行使用。

2.Preloading， Prefetching

这里介绍一下谷歌浏览器Coverage工具

从这个工具中能够看到咱们页面js的使用率，而使用异步引入js的方式能够提升js的使用率，因此webpack建议咱们多使用异步引入的方式，这也是splitChunks.chunks的默认值是"async"的缘由。

可是异步引入代码时也可能存在问题，好比用户点击一个按钮，弹出登陆框，咱们在点击以后加载登陆框的js，可能会让这个点击行为反应变慢，那么如何解决这个问题呢？

使用魔法注释 /* webpackPrefetch: true */ ，这样在主要js加载完，带宽有空闲时，会自动下载须要引入的js。

还能够写成/* webpackPreload: true */，区别是webpackPrefetch会等到主业务文件加载完，带宽有空闲时再去下载js，而preload是和主业务文件一块儿加载的。