在Vue.js中加載字體的最佳作法

博客原文： https://blog.zhangbing.site/2021/04/07/best-practices-for-loading-fonts-in-vue/

添加字體不該該對性能產生負面影響。在本文中，咱們將探討在 Vue 應用程序中加載字體的最佳實踐。

正確聲明font-face的字體

確保正確聲明字體是加載字體的重要方面。這是經過使用 font-face 屬性來聲明你選擇的字體來實現的。在你的Vue項目中，這個聲明能夠在你的根CSS文件中完成。在進入這個問題以前，咱們先來看看Vue應用的結構。

/root
  public/
    fonts/
      Roboto/
        Roboto-Regular.woff2
        Roboto-Regular.woff
    index.html
  src/
    assets/
      main.css
    components/
    router/
    store/
    views/
    main.js

咱們能夠像這樣在 main.css 中進行 font-face 聲明：

// src/assets/main.css

@font-face {
  font-family: "Roboto";
  font-weight: 400;
  font-style: normal;
  font-display: auto;
  unicode-range: U+000-5FF;
  src: local("Roboto"), url("/fonts/Roboto/Roboto-Regular.woff2") format("woff2"), url("/fonts/Roboto/Roboto-Regular.woff") format("woff");
}

首先要注意的是 font-display:auto。使用 auto 做爲值可讓瀏覽器使用最合適的策略來顯示字體。這取決於一些因素，如網絡速度、設備類型、閒置時間等。

要想更多地控制字體的加載方式，你應該使用 font-display: block，它指示瀏覽器短暫地隱藏文本，直到字體徹底下載完畢。其餘可能的值有 swap、fallback 和 optional。你能夠在這裏閱讀更多關於它們的信息。

須要注意的是 unicode-range: U+000-5FF，它指示瀏覽器只加載所需的字形範圍（U+000 - U+5FF）。你還想使用woff和woff2字體格式，它們是通過優化的格式，能夠在大多數現代瀏覽器中使用。

另外須要注意的是 src 順序。首先，咱們檢查字體的本地副本是否可用(local("Roboto」))並使用它。不少Android設備都預裝了Roboto，在這種狀況下，咱們將使用預裝的副本。若是沒有本地副本，則在瀏覽器支持的狀況下繼續下載woff2格式。不然，它會跳至支持的聲明中的下一個字體。

預加載字體

一旦你的自定義字體被聲明，你可使用 <link rel="preload"> 告訴瀏覽器提早預加載字體。在 public/index.html 中，添加如下內容：

<link rel="preload" as="font" href="./fonts/Roboto/Roboto-Regular.woff2" type="font/woff2" crossorigin="anonymous">

rel = 「preload」 指示瀏覽器儘快開始獲取資源，as = 「font」 告訴瀏覽器這是一種字體，所以它優先處理請求。還要注意crossorigin=「anonymous"，由於若是沒有這個屬性，預加載的字體會被瀏覽器丟棄。這是由於瀏覽器是以匿名方式獲取字體的，因此使用這個屬性就能夠匿名請求。

使用 link=preload 能夠增長自定義字體在須要以前被下載的機會。這個小調整大大加快了字體的加載時間，從而加快了您的Web應用程序中的文本渲染。

使用link = preconnect託管字體

當使用Google fonts等網站的託管字體時，你能夠經過使用 link=preconnect 來得到更快的加載時間。它告訴瀏覽器提早創建與域名的鏈接。

若是您使用的是Google字體提供的Roboto字體，則能夠在 public/index.html 中執行如下操做：

<link rel="preconnect" href="https://fonts.gstatic.com">
...
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

這樣就能夠創建與原點https://fonts.gstatic.com 的初始鏈接，當瀏覽器須要從原點獲取資源時，鏈接已經創建。從下圖中能夠看出二者的區別。

當加載字體時沒有使用 link=preconnect 時，你能夠看到鏈接所需的時間（DNS查找、初始鏈接、SSL等）。當像這樣使用link=preconnect 時，結果看起來很是不一樣。

在這裏，你會發現DNS查找、初始鏈接和SSL所花費的時間已經不存在了，由於前面已經進行了鏈接。

使用service workers緩存字體

字體是靜態資源，變化不大，因此它們是緩存的好候選。理想狀況下，您的Web服務器應該爲字體設置一個較長的 max-age expires 頭，這樣瀏覽器緩存字體的時間就會更長。若是你正在構建一個漸進式網絡應用（PWA），那麼你可使用service workers來緩存字體，並直接從緩存中爲它們提供服務。

要開始使用Vue構建PWA，請使用vue-cli工具生成一個新項目：

vue create pwa-app

選擇Manually select features選項，而後選擇Progressive Web App (PWA) Support：

這些就是咱們生成PWA模板所須要的惟一東西。完成後，你就能夠把目錄改成 pwa-app，而後爲app服務。

cd pwa-app
yarn serve

你會注意到在 src 目錄下有一個文件 registerServiceWorker，其中包含了默認的配置。在項目的根目錄下，若是vue.config.js 不存在，請建立它，若是存在，請添加如下內容：

// vue.config.js
module.exports = {
  pwa: {
    workboxOptions: {
      skipWaiting: true,
      clientsClaim: true,
    }
  }
}

vue-cli工具使用PWA plugin生成service worker。在底層，它使用Workbox來配置service worker和它控制的元素、要使用的緩存策略以及其餘必要的配置。

在上面的代碼片斷中，咱們要確保咱們的應用程序始終由service worker的最新版本控制。這是必要的，由於它確保咱們的用戶老是查看應用程序的最新版本。您能夠簽出Workbox配置文檔，以得到對生成的service worker行爲的更多控制。

接下來，咱們將自定義字體添加到 public 目錄。我有如下結構：

root/
  public/
    index.html
    fonts/
      Roboto/
        Roboto-Regular.woff
        Roboto-Regular.woff2

一旦完成了Vue應用程序的開發，就能夠經過從終端運行如下命令來構建它：

yarn build

這將結果輸出到 dist 文件夾中。若是你檢查文件夾的內容，你會注意到一個相似於 precache-manifest.1234567890.js 的文件。它包含了要緩存的資產列表，這只是一個包含修訂版和URL的鍵值對的列表。

self.__precacheManifest = (self.__precacheManifest || []).concat([
  {
    "revision": "3628b4ee5b153071e725",
    "url": "/fonts/Roboto/Roboto-Regular.woff2"
  },
  ...
]);

public/ 文件夾中的全部內容都是默認緩存的，其中包括自定義字體。有了這個地方，你能夠用像service這樣的包來serve你的應用程序，或者把 dist 文件夾託管在web服務器上查看結果。你能夠在下面找到一個應用程序的截圖。

在隨後的訪問中，字體是從緩存中加載的，這能夠加快應用程序的加載時間。

結論

在這篇文章中，咱們研究了在Vue應用程序中加載字體時應用的一些最佳實踐。使用這些實踐將確保你提供的字體看起來不錯，而不影響應用的性能。