webpack之打包分析以及prefetching和preloading

打包分析：

https://webpack.js.org/guides/code-splitting/#bundle-analysis

---

       性能优化使用缓存是很有限的，现在更多的应该是再编写代码时，考虑到代码的覆盖率，如何让页面加载的js文件利用率提高，有些交互后才能用到的代码可以写在异步组件里通过懒加载的形式，把这块的代码逻辑加载进来，这样就可以提高代码的性能，页面访问速度也会加快。如果感觉懒加载影响用户体验，这个时候就可以用prefetch。

预取/预加载模块 Prefetching/Preloading modules

webpack 4.6.0+增加了对预取和预加载的支持。

• 在声明您的导入时使用这些内联指​​令可以使webpack输出“ Resource Hint”，它告诉浏览器：
  • prefetch(预取)：将来可能需要一些导航资源
  • preload（预加载）：当前导航期间可能需要资源
    
    简单的预取示例可以包含一个HomePage组件，该组件呈现一个LoginButton组件，然后按需LoginModal在单击后加载该组件。

LoginButton.js

//...
import(/* webpackPrefetch: true */ 'LoginModal');

这将导致将<link rel="prefetch" href="login-modal-chunk.js">其附加在页面的开头，这将指示浏览器在空闲时间预取login-modal-chunk.js文件。

一旦父块被加载，webpack将添加预取提示。

• 与Prefetch相比，Preload指令有很多区别：
  • 预加载的块开始并行于父块加载。父块完成加载后，预取的块开始。
  • 预加载的块具有中等优先级，可以立即下载。浏览器空闲时，将下载预提取的块。
  • 父块应立即请求预加载的块。预取的块可以在将来的任何时候使用。
  • 浏览器支持不同。
    
    可以有一个简单的预加载示例，该示例Component始终依赖于应放在单独块中的大型库。

让我们想象一个ChartComponent需要巨大的组件ChartingLibrary。它显示了LoadingIndicator何时渲染，并立即按需导入ChartingLibrary：

ChartComponent.js

//...
import(/* webpackPreload: true */ 'ChartingLibrary');

当ChartComponent请求使用的页面时，也会通过来请求charting-library-chunk <link rel="preload">。假设页面块较小，并且完成速度更快，则页面将显示为LoadingIndicator，直到已经请求charting-library-chunk完成。这将增加一点加载时间，因为它只需要一个往返而不是两个。特别是在高延迟环境中。

错误地使用webpackPreload实际上会损害性能，因此在使用时要小心。

参考：https://webpack.js.org/guides/code-splitting/#bundle-analysis