為新型瀏覽器提供新程式碼,加快網頁載入速度

建立能在所有主要瀏覽器上都能順利運作的網站,是最重要的 開放網路生態系統然而,這意味著要確保所有的 您編寫程式碼的每個瀏覽器都支援您編寫的程式碼。如果發生以下情況: 想要使用新的 JavaScript 語言功能,您需要 為目前不支援的舊版瀏覽器提供回溯相容的格式 具體做法是指示 Kubernetes 建立並維護 一或多個代表這些 Pod 的物件

Babel 是最常用於編譯程式碼的工具 在不同瀏覽器和環境下,含有新語法 可以理解本指南假設您使用 Babel,因此您要 必須遵循設定操作說明 也請將其加進應用程式選取「webpack」 ,且您在 Build Systems 中將 webpack 做為模組整合工具使用。

如果只要使用 Babel 來轉移使用者所需的資料,您 需要:

  1. 找出您想要指定的瀏覽器。
  2. 搭配適當的瀏覽器目標使用 @babel/preset-env
  3. 使用 <script type="module"> 即可停止將轉譯為程式碼的瀏覽器傳送給不需要該程式碼的瀏覽器。

找出您要指定的瀏覽器

在您開始修改應用程式中程式碼的傳輸方式之前, 但需要識別哪些瀏覽器可存取您的應用程式。分析哪些瀏覽器 以及您要指定的目標 做出明智決策

使用 @babel/preset-env

轉碼程式碼產生的檔案大小通常大於 原始的表單內容盡可能減少編譯量 即可縮減套裝組合的大小,改善網頁效能。

與其加入特定外掛程式來選擇性地編譯特定語言 Babel 提供一系列包含外掛程式的預設選項 。使用 @babel/preset-env ,只納入您計劃要部署的瀏覽器所需的轉換和 polyfill 。

在 Babel 的 presets 陣列中加入 @babel/preset-env 設定檔,.babelrc

{
 "presets": [
   [
     "@babel/preset-env",
     {
       "targets": ">0.25%"
     }
   ]
 ]
}

使用 targets 欄位指定要納入的瀏覽器版本 在 browsers 欄位中新增適當的查詢。@babel/preset-env 與瀏覽器清單整合,一種開放原始碼設定,由 以及指定瀏覽器的工具如需相容查詢的完整清單,請前往 瀏覽器清單說明文件。 另一種方法是使用 .browserslistrc 檔案列出環境。 和廣告空間大小

">0.25%" 值會指示 Babel 僅納入轉換 需要支援全球超過 0.25% 的瀏覽器 。如此可確保套件不含不必要的轉譯內容 極少數使用者會使用的瀏覽器程式碼。

在大多數情況下,這比採取下列做法更適合: 設定:

  "targets": "last 2 versions"

"last 2 versions" 值會將您的程式碼 最近兩個版本。 因此針對停用的瀏覽器 (如 Internet Explorer),提供支援服務。 假如這不是預期情況,可能會過度增加套裝組合的大小 存取應用程式所用的瀏覽器。

無論如何,您應該選取適當的查詢組合, 甚至可以指定符合需求的瀏覽器

啟用新型錯誤修正功能

@babel/preset-env 會將多個 JavaScript 語法功能分為多個集合,並啟用/停用 可供您根據所指定的目標瀏覽器雖然這種做法很適合您 如果目標瀏覽器包含只有單一功能的錯誤,則系統會轉換其語法功能。 因此,轉換的程式碼通常多於所需。

一開始是獨立的預設設定@babel/preset-env 中的錯誤修正選項 如要解決這個問題,請將某些瀏覽器無法正常使用的新語法,轉換為最接近的 和其他瀏覽器中一樣的通用語法產生的結果幾乎完全相同 小幅調整語法,確保所有目標瀏覽器都能相容。如要使用此功能 最佳化,請確認您已安裝 @babel/preset-env 7.10 或更新版本,然後將 對 truebugfixes 資源:

{
 "presets": [
   [
     "@babel/preset-env",
     {
       "bugfixes": true
     }
   ]
 ]
}

在 Babel 8 中,bugfixes 選項會預設為啟用。

使用 <script type="module">

JavaScript 模組或 ES 模組是 所有主要瀏覽器。您可以使用模組 建立可從其他模組匯入及匯出的指令碼 使用 @babel/preset-env 時,也可以只指定支援 具體做法是指示 Kubernetes 建立並維護 一或多個代表這些 Pod 的物件

與其查詢特定瀏覽器版本或市佔率,建議您 指定 .babelrc 檔案的 targets 欄位內的 "esmodules" : true

{
   "presets":[
      [
         "@babel/preset-env",
         {
            "targets":{
               "esmodules": true
            }
         }
      ]
   ]
}

目前支援許多使用 Babel 編譯的 ECMAScript 新功能 環境。完成之後 簡化程序,確保只使用經過轉譯的程式碼 適用於有需要 某些瀏覽器的瀏覽器

如果瀏覽器支援模組,就會忽略含有 nomodule 屬性的指令碼。 相反地,不支援模組的瀏覽器會忽略 type="module"。這表示您可以納入模組和編譯的備用項。

在理想情況下,應用程式的兩個版本指令碼如下所示:

  <script type="module" src="main.mjs"></script>
  <script nomodule src="compiled.js" defer></script>

支援模組擷取及執行 main.mjs 並忽略 compiled.js 的瀏覽器。 不支援模組的瀏覽器則相反。

如果您使用 webpack,可以在設定中的 不同的應用程式版本

  • 版本僅適用於支援模組的瀏覽器。
  • 包含編譯指令碼且可在任何舊版瀏覽器中運作的版本。這種壓縮檔案必須支援更多種瀏覽器,因此檔案會較大。
,瞭解如何調查及移除這項存取權。

感謝 Connor Clark 和 Jason Miller 的評論