基于 webpack，项目正确的编写方式--prefetching

为什么要使用 prefetch？

prefetch 可以在主文件加载完成之后再加载剩余内容，提高页面加载速度，避免资源浪费。

所以我们在编写代码时，需要将初始化页面时不需要的方法、组件等提取出来，写成 prefetch 的形式。

 

以 nification 为例：

之前的使用方法

这个提示是用户在点击按钮时调用的，再初始化页面的时候，是不会使用的，所以我们可以改写成 prefetch 

这里有一点需要注意，使用 import 异步加载，需要的 plugin –-- babel-plugin-dynamic-import-webpack 来支持

另外，我们可以使用 chrome 控制台中的 coverage 来查看初始化页面时，代码的使用率。

使用方法：首先打开控制台后，按 shift + comm + p 输入 coverage 回车，点击录制按钮，如下： 

由于 notification 组件非常小，无法形成鲜明对比，所以我们使用 lodash 来做下对比：

使用前：

 使用后：

虽然表面上看，未使用率占比变高了，但是我们看前面的数据，首屏加载大小减少了 400 多，未使用代码减少了 100 多，有明显的变化。

所以，使用 prefetch，对于页面的优化，还是很有帮助的。

详情链接： https://webpack.docschina.org/guides/code-splitting/#%E9%A2%84%E5%8F%96-%E9%A2%84%E5%8A%A0%E8%BD%BD%E6%A8%A1%E5%9D%97-prefetch-preload-module-