本番環境向けビルド

このページでは、Litコンポーネントを使用する*アプリケーション*を本番環境向けにビルドするための推奨事項に焦点を当てています。再利用可能なLit*コンポーネント*をnpmに公開する前にソースコードに対して実行するビルド手順の推奨事項については、公開を参照してください。

Litコンポーネントを含むアプリケーションをビルドする場合、Rollupやwebpackなどの一般的なJavaScriptビルドツールを使用して、ソースコードと依存関係を本番環境で提供できるように準備できます。

開発環境と本番環境の両方に適用されるLitコードのビルド要件の完全なリストについては、要件を参照してください。

これらの最小要件に加えて、このページでは、コードを本番環境向けに準備する際に考慮すべき最適化と、それらを実装する具体的なRollup設定について説明します。

Litプロジェクトは、他のWebプロジェクトと同じビルド時の最適化のメリットがあります。 Litアプリケーションを本番環境で提供する場合、以下の最適化が推奨されます。

• ネットワークリクエストを削減するためのJavascriptモジュールのバンドル（例：Rollupまたはwebpackを使用）。
• ペイロードサイズを小さくするためのJavascriptコードの縮小（Terserは最新のJavaScriptをサポートしているため、Litでうまく機能します）。
• 最新のブラウザに最新のコードを提供することで、一般的にサイズが小さく高速になり、古いブラウザではコンパイルされたコードにフォールバックします。
• キャッシュの無効化を容易にするために、バンドルされたJavaScriptを含む静的アセットをハッシュ化します。
• ネットワーク経由のバイト数を削減するために、配信時の圧縮（gzipまたはbrotliなど）を有効にします。

さらに、LitテンプレートはJavaScriptテンプレート文字列リテラル内で定義されているため、標準のHTMLミニファイアーでは処理されないことに注意してください。テンプレート文字列リテラル内のHTMLを縮小するプラグインを追加すると、コードサイズをある程度削減できます。この最適化を実行するために、いくつかのパッケージが利用可能です。

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

Litコードを提供するために必要な、必須およびオプションのビルド手順を実行するために使用できるツールはたくさんあり、Litは特定のツールを必要としません。ただし、Rollupは標準のESモジュール形式で動作し、クライアントでネイティブモジュールを活用する最適なコードを出力するように設計されているため、Rollupを推奨します。

Rollupを設定してプロジェクトをバンドルする方法はたくさんあります。Modern Webプロジェクトは、アプリケーションを構築するための多くのベストプラクティスを使いやすいパッケージにまとめるのに役立つ優れたRollupプラグイン@web/rollup-plugin-htmlをメンテナンスしています。このプラグインを使用した設定例を以下に示します。

以下の注釈付き`rollup.config.js`ファイルは、このページで説明されている最新のブラウザビルド要件と本番環境の最適化を満たすアプリケーションをビルドします。この設定は、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

このページを編集