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

Houssein Djirdeh

建立能在所有主要瀏覽器上都能順利運作的網站，是最重要的 開放網路生態系統然而，這意味著要確保所有的 您編寫程式碼的每個瀏覽器都支援您編寫的程式碼。如果發生以下情況： 想要使用新的 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 或更新版本，然後將 對 true 的 bugfixes 資源：

{
 "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 的評論