日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

webpack配置preload和prefetch預加載技術

作者：jieyucx 更新時間： 2023-07-26 編程語言

我們前面已經做了代碼分割，同時會使用 import 動態導入語法來進行代碼按需加載（我們也叫懶加載，比如路由懶加載就是這樣實現的）。

但是加載速度還不夠好，比如：是用戶點擊按鈕時才加載這個資源的，如果資源體積很大，那么用戶會感覺到明顯卡頓效果。

要優化這種情況，可以使用preload和prefetch技術

一、什么是preload和prefetch

Preload和Prefetch是兩種優化前端性能的技術，它們可以讓瀏覽器在某些條件下提前加載一些資源，從而加快應用程序的加載速度。

Preload指的是在頁面加載時預加載一些關鍵資源，這些資源在接下來的頁面操作中會立即用到。Preload可以使用屬性來實現，比如：

<link rel="preload" href="path/to/resource" as="type"/>

其中，

  • href表示需要預加載的資源路徑
  • as屬性指定預加載資源的類型

相比之下，Prefetch是在頁面加載后不緊急需要但將來可能需要使用的資源進行預加載。Prefetch的實現方式是通過添加屬性來實現，例如：

<link rel="prefetch" href="path/to/resource"/>

這里

  • href表示需要預加載的資源路徑。

需要注意的是，Preload和Prefetch都不是瀏覽器強制加載資源，而是給瀏覽器提供了一些提示，讓它在空閑時間主動加載一些資源，從而提升應用程序的性能體驗。

下面是一個Preload的例子，假設我們有一個應用程序需要用到moment.js庫，我們可以將moment.js資源進行預加載：

<head>
  <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js" as="script" />
</head>

這樣，當我們在應用程序中需要用到moment.js庫時，它就已經提前被加載出來了，從而避免了因為瀏覽器加載緩慢而導致的性能問題。

二、在webpack中配置使用

  1. 下載

npm i @vue/preload-webpack-plugin -D

  1. 配置
const PreloadWebpackPlugin = require("@vue/preload-webpack-plugin");
plugins: [
	 new PreloadWebpackPlugin({
      rel: "preload", // preload兼容性更好
      as: "script",
      // rel: 'prefetch' // prefetch兼容性更差
    }),
]

配置完成之后我們進行生產打包

npm run build

在這里插入圖片描述

如上圖可以看到我們的公共chunk已經使用prealod方式引入到index.html中了。
在這里插入圖片描述
并且他的priority是最低的。

值得注意的是這兩項技術它們的兼容性不是很好
查看兼容性網站：https://caniuse.com/?search=preload

  • preload
    在這里插入圖片描述
  • prefetch
    在這里插入圖片描述

原文鏈接：https://blog.csdn.net/jieyucx/article/details/131271315

  • 上一篇：沒有了
  • 下一篇：沒有了
欄目分類
最近更新