Parcel v2.12.0

2024-02-28

Parcel v2.12.0 では、通常の JavaScript 関数を使用してビルド時にコードを生成できるマクロのサポートが導入されました。また、新しいオンライン REPL、CSS バンドルのサポートの改善、アプリのコード分割を微調整するための構成オプションの追加、パフォーマンスとメモリ使用量の改善も含まれています。

マクロ

Parcel v2.12.0 では、マクロのサポートが導入されました。もともと Bun で実装されていたマクロは、バンドルされるのではなく、ビルド時に実行される JavaScript 関数です。マクロによって返された値は、元の関数呼び出しの代わりにバンドルにインライン化されます。これにより、カスタムプラグインなしで定数、コード、さらには追加のアセットを生成できます。

マクロは、出力にバンドルされるのではなく、ビルド時に実行されることを示すために、インポート属性を使用してインポートされます。組み込みの Node モジュールや npm のパッケージなど、任意の JavaScript または TypeScript モジュールをマクロとしてインポートできます。

この例では、regexgen ライブラリを使用して、ビルド時に文字列のセットから最適化された正規表現を生成します。

import regexgen from 'regexgen' with {type: 'macro'};

const regex = regexgen(['foobar', 'foobaz', 'foozap', 'fooza']);
console.log(regex);

これは、次のバンドルにコンパイルされます。

console.log(/foo(?:zap?|ba[rz])/);

ご覧のとおり、regexgen ライブラリは完全にコンパイルされて消え、静的な正規表現が残っています。

Parcel のマクロの実装では、ビルド時に関数を生成したり、新しいアセットを生成したりすることもできます。たとえば、マクロは CSS を生成し、それが JS ファイルからインポートされたかのように、静的に CSS バンドルに抽出されます。

この例では、CSS の文字列を受け取り、生成されたクラス名を返します。CSS はアセットとして追加され、CSS ファイルにバンドルされます。JavaScript バンドルには、生成されたクラス名が静的な文字列としてのみ含まれます。

index.ts

import {css} from './css.ts' with {type: 'macro'};

<div className={css('color: red; &:hover { color: green }')}>
  Hello!
</div>

css.ts

import type {MacroContext} from '@parcel/macros';

export async function css(this: MacroContext | void, code: string) {
  let className = hash(code);
  code = `.${className} { ${code} }`;

  this?.addAsset({
    type: 'css',
    content: code
  });

  return className;
}

上記の例のバンドルされた出力は、次のようになります。

index.js

<div className="ax63jk4">
  Hello!
</div>

index.css

.ax63jk4 {
  color: red;
  &:hover {
    color: green;
  }
}

これは基本的に、ほんの数行のコードでビルド時の静的抽出を備えた CSS-in-JS ライブラリです！また、マクロは通常の JavaScript または TypeScript 関数であるため、オブジェクト API やテーマ値を使用した CSS の生成など、必要な API をこの上に作成できます。これにより、CSS-in-JS をはじめ、さまざまなイノベーションが生まれることを期待しています。詳細については、ドキュメントをご覧ください。

REPL

Parcel には、ブラウザで試せる REPL があります！Niklas Mischkulnig 氏が数年かけて REPL の開発に取り組んでおり、それがついに当社のウェブサイトに統合されたことを嬉しく思っています。REPL には、完全なコードエディター、ファイルブラウザ、ウォッチモード、開発サーバー、ホットモジュールリロードなど、ほとんどの Parcel 機能のサポートが含まれています。

REPL の内部は、Web Assembly、開発サーバーをホストするサービスワーカー、マルチコア処理用の Web ワーカーバックエンド、パッケージマネージャーのキャッシュ用の IndexedDB など、最先端の Web テクノロジーによって駆動されています。ブラウザ用にコンパイルされた Yarn のバージョンを実行することで、npm からパッケージをインストールすることもできます。

REPL は、Parcel を試してみて、どのようにコンパイルされるかを確認するのに最適です。また、共有可能なバグの再現を作成するのにも最適です。ぜひお試しください！

Lightning CSS を利用したバンドル

Parcel は、デフォルトで Lightning CSS を使用して CSS ファイルを変換しています。現在、Parcel は CSS ファイルのバンドルにもこれを使用しています。これにより、カスケードレイヤーを使用した @import などの最新の CSS 機能のサポート、メディアおよびサポートクエリを使用したインポートのサポートの改善、複雑な CSS の順序付けの問題のより正確な処理が実現しました。

手動共有バンドル

デフォルトでは、Parcel はキャッシュ効率を最大限にするためにコードを自動的に分割します。アプリケーションの複数の部分で共有されている一般的なモジュールは、ブラウザで個別にロードおよびキャッシュできるように、共有バンドルに抽出されます。ただし、アプリの特定のパーツのロード方法について、Parcel よりも詳しく知っている場合があり、後で最適化するために事前にフェッチすることを選択する場合があります。このリリースでは、この問題に対処するために手動共有バンドルのサポートを導入しています。

手動共有バンドルを使用すると、特定のモジュールがどこで使用されても常に一緒にバンドルされるように Parcel を構成できます。たとえば、一般的に使用されるライブラリのセットをロードするベンダーバンドルを作成したり、特定のルートのアセットを 1 つのバンドルにグループ化したりできます。これは、ファイルパスを照合するための glob、ルートアセットまたはタイプごとにグループ化する追加オプション、複数の並列 HTTP リクエストに分割するなどによって指定します。詳細については、ドキュメントをご覧ください。

手動共有バンドルは、Parcel のデフォルトのバンドルアルゴリズムを試して、実際のパフォーマンステストを行った後に適用するのが最適です。コード構造を変更しても解決できない特定のパフォーマンスの問題が発生した場合は、手動共有バンドルを使用して Parcel のデフォルトの動作を上書きします。手動共有バンドルは、webpack などの他のバンドラーからコードを移植する場合にも役立ちます。

パフォーマンスの改善

ほとんどの Parcel リリースと同様に、v2.12.0 にもいくつかのパフォーマンスの改善が含まれています。このリリースでは、コアグラフデータ構造を改善し、メモリ使用量を約 52% 削減し、書き込みのパフォーマンスを約 5% 向上させました。実際の非常に大規模なアプリの場合、これは起動、ビルド、シャットダウン時間に影響を与えることなく、メモリ使用量が約 800MB 削減されることになります。これらの最適化をどのように行ったかについて知りたい場合は、PR をご覧ください。また、SharedArrayBuffer にバックアップされたカスタムグラフデータ構造の詳細については、ドキュメントが用意されています。

また、このリリースでは、Parcel がグラフをディスクに保存する方法を改善し、グラフをシリアル化している間、プロセスがシャットダウンするのをブロックするのではなく、開発中のアイドル時間中に小さなチャンクで動作するようにしました。グラフ全体を一度にシリアル化する代わりに、変更された部分を追跡し、それらのみを再度シリアル化するようになりました。これにより、非常に大規模なプロジェクトでの Parcel のシャットダウンパフォーマンスが改善されるはずです。

感謝！

このリリースに貢献してくださった皆様に感謝します！その他のバグ修正と改善点については、完全な変更ログをご覧ください。