Lit vs Stencil: どちらの Web Components ツールか
Lit は web components を書くための小さなランタイムライブラリ。Stencil は標準準拠のコンポーネントとバインディングを生成するコンパイラです。
Lit は手書きの web components 向けに、リアクティブなプロパティとテンプレートを備えた薄く高速なランタイムの基底クラスを提供し、プラットフォームに近い立ち位置を保ちます。Stencil は(Ionic チームによる)ビルド時のコンパイラで、高度に最適化された web components に加えてフレームワークの wrapper、lazy loading、prerendering を生成し、大規模な design system に適します。Lit はシンプルさと軽量なランタイムで勝り、Stencil はツール、最適化、マルチフレームワークの配布で勝ります。
| Lit | Stencil | |
|---|---|---|
| アプローチ | ランタイムライブラリ | ビルド時のコンパイラ |
| 出力 | web components | 最適化された web components + wrapper |
| ツール | 最小限 | リッチ(CLI、prerender、lazy) |
| 適した用途 | 軽量なカスタム要素 | 大規模な design system、マルチフレームワーク |
| フットプリント | 小さなランタイム | コンパイル済み、最適化 |
ユースケースと出力
Lit は最小限のオーバーヘッドで web components を書くための、薄く標準に沿ったライブラリを望むチームに適します。Stencil は多くのフレームワークに出荷しなければならない design system に適し、生成された wrapper、lazy loading、prerendering をコンパイラが処理します。
ビルドと CI
Stencil のコンパイルは最適化された bundle とバインディングを生成し、Lit は標準の bundling を超える build をほとんど必要としません。どちらも managed runners 上で build とテストを行い、より高速な runner は Stencil のコンパイルとコンポーネントテストのステップを短縮します。
結論
web components を手書きするための軽量なランタイムを望むなら Lit。リッチなツールで複数のフレームワークに出荷する大規模な design system を構築するなら Stencil。Lit はシンプルさを重視し、Stencil は生成され最適化されたマルチフレームワークの配布を重視します。