為生產環境建置

此頁面著重於建議建置使用 Lit 組件的應用程式以供生產環境使用。若要取得關於在將可重複使用的 Lit組件發佈到 npm 之前，對原始碼執行的建置步驟的建議，請參閱發佈。

當建置包含 Lit 組件的應用程式時，您可以使用常見的 JavaScript 建置工具 (如 Rollup 或 webpack) 來準備原始碼和相依性，以在生產環境中提供服務。

如需建置 Lit 程式碼的所有需求列表，請參閱需求，這些需求適用於開發和生產環境。

除了這些最低需求之外，此頁面還說明您在準備程式碼以供生產環境使用時應考慮的優化，以及實作這些優化的具體 Rollup 設定。

Lit 專案受益於與其他 Web 專案相同的建置時優化。建議在生產環境中提供 Lit 應用程式時進行以下優化

• 將 Javascript 模組捆綁以減少網路請求 (例如，使用 Rollup 或 webpack)。
• 縮小 Javascript 程式碼以縮減酬載大小 (Terser 非常適合 Lit，因為它支援現代 JavaScript)。
• 為現代瀏覽器提供現代程式碼，因為它通常較小且速度較快，並在較舊的瀏覽器上回退到編譯後的程式碼。
• 雜湊靜態資產，包括捆綁的 JavaScript，以便更容易使快取失效。
• 啟用伺服器端壓縮 (例如 gzip 或 brotli)，以便在網路傳輸時減少位元組數。

此外，請注意，由於 Lit 範本是在 JavaScript 範本字串文字內定義的，因此它們不會由標準 HTML 縮小工具處理。新增一個可縮小範本字串文字中 HTML 的外掛程式可以適度減少程式碼大小。有幾個套件可用於執行此優化

• Rollup：rollup-plugin-minify-html-literals
• Webpack：minify-html-literals-loader

您可以使用許多工具來執行必要的和選用的建置步驟，以提供 Lit 程式碼，而 Lit 並不要求任何特定工具。但是，我們建議使用 Rollup，因為它旨在與標準 ES 模組格式搭配使用，並輸出利用用戶端原生模組的最佳程式碼。

有很多方法可以設定 Rollup 來捆綁您的專案。Modern Web 專案維護一個出色的 Rollup 外掛程式 @web/rollup-plugin-html，可協助將許多應用程式建置的最佳實務整合到一個易於使用的套件中。以下說明使用此外掛程式的範例設定。

以下註解的 rollup.config.js 檔案將建置一個符合現代瀏覽器建置需求和此頁面所述的生產環境優化的應用程式。此設定適用於向可以執行沒有 Polyfill 的 ES2021 JS 的現代瀏覽器提供服務。

必要節點模組

npm i --save-dev rollup \
  @web/rollup-plugin-html \
  @web/rollup-plugin-copy \
  @rollup/plugin-node-resolve \
  @rollup/plugin-terser \
  rollup-plugin-minify-html-literals \
  rollup-plugin-summary

rollup.config.js

// Import rollup plugins
import html from '@web/rollup-plugin-html';
import {copy} from '@web/rollup-plugin-copy';
import resolve from '@rollup/plugin-node-resolve';
import {terser} from '@rollup/plugin-terser';
import minifyHTML from 'rollup-plugin-minify-html-literals';
import summary from 'rollup-plugin-summary';

export default {
  plugins: [
    // Entry point for application build; can specify a glob to build multiple
    // HTML files for non-SPA app
    html({
      input: 'index.html',
    }),
    // Resolve bare module specifiers to relative paths
    resolve(),
    // Minify HTML template literals
    minifyHTML(),
    // Minify JS
    terser({
      ecma: 2021,
      module: true,
      warnings: true,
    }),
    // Print bundle summary
    summary(),
    // Optional: copy any static assets to build directory
    copy({
      patterns: ['images/**/*'],
    }),
  ],
  output: {
    dir: 'build',
  },
  preserveEntrySignatures: 'strict',
};

執行 Rollup 建置

rollup -c

編輯此頁面