如何將 css 從 Application bundle 資源中剝離出來

為了提高 Angular 載入效能，一種思路就是按需載入 CSS 樣式表，而不是把它們打包到 application bundle 中去。

Web 應用的 Application Bundle 是一個包含所有應用程式程式碼和資源的檔案集合，它們被打包在一起以便於部署和分發。Application Bundle 通常包含 HTML、CSS 和 JavaScript 檔案，以及任何相關的影像、字型和其他靜態資源。

Application Bundle 的主要目的是讓 Web 應用程式可以獨立執行，而不需要依賴於特定的伺服器或環境。這使得開發人員可以輕鬆地將應用程式部署到不同的伺服器上，或將其分發給其他使用者。

Web 應用的 Application Bundle 通常包含了應用程式的程式碼、樣式、影像、字型、配置檔案等資源，以及一個 HTML 檔案，作為應用程式的入口點。此外，它還可以包含一些用於配置應用程式執行環境的檔案，比如 JavaScript 包管理器的配置檔案、伺服器配置檔案等。

Web 應用的 Application Bundle 可以透過各種方式分發，例如透過 Web 伺服器提供下載、透過應用商店釋出、透過 P2P 分發等方式。在使用 Application Bundle 時，使用者可以方便地安裝和解除安裝應用程式，而無需手動配置執行環境或處理依賴項。同時，開發人員也可以使用 Application Bundle 來簡化應用程式的部署過程，提高開發效率和使用者體驗。

常見的 Application Bundle 格式包括 ZIP、TAR 和 JAR 等。另外，現代 Web 應用程式框架，如 React、Vue 和 Angular 等，也提供了內建的工具和命令列介面，可以幫助開發人員輕鬆地構建和打包應用程式。

假設我有一個 Angular 應用，除了 main.css 之外，我還有下面兩個 css 檔案：

src/styles/themes/theme-light.css
src/styles/themes/theme-dark.css
Next, you would have them in angular.json’s styles option:

這些 css 檔案出現在 angular.json 檔案的 styles 區域：

"styles": [
    "src/styles.css",
    "src/styles/themes/theme-light.css",
    "src/styles/themes/theme-dark.css"
  ]

預設情況下，這些 css 都是 Application bundle 的一部分。

對 angular.json 做一些簡單的修改，可以讓 css 按需載入：

"styles": [
    "src/styles.css",
    {
      "input": "src/styles/themes/theme-light.css",
      "inject": false,
      "bundleName": "theme-light"
    },
    {
      "input": "src/styles/themes/theme-dark.css",
      "inject": false,
      "bundleName": "theme-dark"
    }
  ]

兩個新的 option：

inject: 設定這個 false 將不會包含來自“input”路徑的檔案在 bundle 中
bundleName：將建立一個單獨的包，其中包含來自“輸入”路徑的樣式表

重新執行 ng build，會發現這兩個 css 檔案構建生成了額外的 bundle 檔案：

如何將 css 從 Application bundle 資源中剝離出來

相關文章