zoukankan      html  css  js  c++  java
  • 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

    今天你学习了吗!!!
  • 相关阅读:
    宝宝咳嗽
    如何查看 oracle 官方文档
    00 序 建立环境
    09 变量重游
    【TYVJ】1359
    【COGS】147. [USACO Jan08] 架设电话线(二分+spfa)
    【wikioi】1904 最小路径覆盖问题(最大流+坑人的题+最小路径覆盖)
    【wikioi】1034 家园(最大流+特殊的技巧)
    【BZOJ】1040: [ZJOI2008]骑士(环套树dp)
    【POJ】2234 Matches Game(博弈论)
  • 原文地址:https://www.cnblogs.com/nayek/p/12068348.html
Copyright © 2011-2022 走看看