Parcel v2.9.0
Parcel v2.9.0には、長らく要望されていた多くの機能が含まれています。これには、package.jsonの "exports"とtsconfig.jsonの機能をサポートする新しいリゾルバー、ESMプラグインと設定のサポート、ローカルParcelプラグインなどが含まれます。また、SWCをベースとした新しいデフォルトのJSミニファイア、増分シンボル伝播、改良されたバンドラーデータ構造によってパフォーマンスも向上し、新しいビルドパフォーマンス追跡機能も含まれています。これは大きなリリースです。詳しく見ていきましょう！
新しいリゾルバー
#Parcelのリゾルバーは、import "react"などの依存関係のファイルパスを見つける役割を担っています。これは単純に見えるかもしれませんが、長年にわたるJavaScriptエコシステムの発展に伴い、ますます複雑になっています。Parcelの現在のリゾルバー実装は、2018年にさかのぼる初期に記述されたものであり、package.jsonの "exports"や "imports"などの最新の機能が不足しています。
Parcel v2.9.0には、Rustでゼロから書き直された全く新しいリゾルバー実装が含まれています。既存のParcelの解決機能をすべてサポートしながら、package.jsonの "exports"と "imports"、およびtsconfig.jsonの "baseUrl"、"paths"、"moduleSuffixes"のサポートを追加しています。
残念ながら、package.jsonの "exports"のサポートを有効にすることは、破壊的変更です。パッケージが "exports"を宣言する場合、コンシューマーはエクスポートされていないファイルをインポートできなくなります。さらに、 "import"や "require"などのエクスポート条件により、デュアルパッケージハザードの可能性があります。これらの理由から、exportsのサポートは現在オプトインとなっており、プロジェクトで明示的に有効にする必要があります。これは、プロジェクトルートのpackage.jsonに以下を追加することで実行できます。
{
"@parcel/resolver-default": {
"packageExports": true
}
}新しい機能の詳細については、package.json exportsとtsconfig.jsonのドキュメントをご覧ください！
ESMプラグインと設定
#Parcelは、既存のCommonJSのサポートに加えて、ネイティブESモジュールとして記述されたプラグインと設定ファイルもサポートするようになりました。つまり、プラグインは.mjs形式を使用してnpmに公開したり、package.jsonに"type": "module"を使用して.jsファイルでESM構文を有効にしたりできます。postcss.config.mjsなどの設定ファイルもサポートされるようになりました。
これは驚くほど実装が難しかったため、これほど時間がかかっています。Parcelは、開発パフォーマンスを向上させるために、実行するすべての処理についてきめ細かいキャッシングをサポートしています。これが機能するためには、ビルドに関与するすべてのファイルをトラッキングする必要があります。これには、出力に影響を与えたプラグイン、コンパイラ、設定ファイルなどのすべての開発依存関係が含まれます。これらのいずれかが変更された場合、Parcelは必要なファイルのみを再コンパイルします。
内部的には、すべてのロードされた開発依存関係を追跡できるように、Nodeのrequire実装をパッチすることに依存していました。しかし、これはCommonJSモジュールでのみ機能します。ネイティブESMでは、現在Nodeでモジュールローダーにアクセスする安定した方法がないため、インポートされたファイルをトラッキングできませんでした。
ESM依存関係を追跡するために、Parcelは優れたes-module-lexerプロジェクトのフォークを使用するようになりました。これはCで記述された非常に高速なパーサーであり、ESモジュールのインポートとエクスポート構文を分析するために特別に設計されています。これを、新しいリゾルバー実装を使用してこれらの依存関係を解決し、ESMプラグインまたは設定ファイルで使用されるすべてのファイルを収集するRustライブラリと統合しました。これにより、これらの依存関係のいずれかが変更された場合にキャッシュを無効化できます。
可能な限り静的解析を行うように最善を尽くしていますが、import(someVariable)のような構文はサポートされておらず、ビルドごとにキャッシュが無効化されます。そのような場合は警告が表示されます。
このリリースでは、ESMサポートは実験的です。フィードバックがある場合は、Githubで問題やディスカッションを開いてください。
ローカルプラグイン
#従来、Parcel v2プラグインはnpmパッケージである必要がありました。モノレポを使用している場合、プロジェクト内のローカルプラグインを使用することは可能でしたが、他の人々が再利用できるように、常にプラグインをnpmまたは内部企業レジストリに公開することを推奨していました。しかし、モノレポ設定を使用していないプロジェクトでは、これによりプラグインの構築とプロトタイピングが難しくなるとのフィードバックがありました。
Parcel v2.9.0では、プラグインを.parcelrc設定からの相対パスとして参照できます。独自のpackage.jsonを持つ必要はありません。JavaScriptファイルを直接参照できます。変更を加えるとプラグインはホットリロードされるため、開発中にParcelを再起動する必要はありません。npmへのプラグインの公開は依然として推奨していますが、これにより新しいプラグインのプロトタイプ作成が容易になります。
ドキュメントでローカルプラグインの詳細を確認できます。
SWCミニファイア
#Parcelは、SWC JavaScriptコンパイラに切り替えた最初のツールの一つであり、2021年に10倍のパフォーマンス向上に役立ちました。Parcel v2.9.0では、デフォルトのミニファイアをTerserからSWCにも切り替えています。
SWCミニファイアは、Terserよりも約7倍高速であり、同等かそれ以下の出力サイズが生成されます。ほとんどのTerser設定オプションもSWCでサポートされているため、.terserrcがある場合は引き続き機能します。
エコシステム全体のミニファイパフォーマンスを向上させるための素晴らしい作業をしてくれたSWCチームに多大な感謝を！
増分シンボル伝播
#Parcelの当初からの主な目標の1つは、プロジェクト全体のサイズではなく変更のサイズに基づいて再構築をスケーリングすることでした。つまり、プロジェクトが1ファイルでも10万ファイルでも、再構築が高速である必要があります。そのため、2017年の最初のバージョンからきめ細かいキャッシングを実装し、増分バンドルなどの新しい機能を導入し続けてきました。
シンボル伝播は、プロジェクトの完全な依存関係グラフを巡回し、各モジュールのどのエクスポートが実際に使用され、どれがツリーシェイクできるかを決定するアルゴリズムです。Parcel v2.9.0では、このアルゴリズムがインクリメンタルになりました。変更を行うたびにグラフ全体をトラバースする代わりに、変更したファイルで変更された依存関係を追跡し、既存のグラフをその場で外科的に更新します。非常に大規模なプロジェクトでは、これにより、ファイルを保存するたびに実行する必要のある作業量が大幅に削減されます。
シンボル伝播は、本番ビルドだけでなく開発時にも実行されるようになりました。これにより、モジュールからエクスポートされていないものをインポートしようとすると開発中に適切なエラーを発行できるようになり、デバッグに役立ちます。
ビルドパフォーマンスのトレース
#Parcelには、ビルドの各フェーズで費やされた時間、呼び出されたプラグイン、各プラグインで費やされた時間を追跡する--trace CLIフラグが追加されました。Parcelトレースを使用すると、「ビルド中に最も時間がかかっているプラグインはどれか？」や「プロジェクトのどのファイルの変換に最も時間がかかっているか？」などの質問に答えることで、ビルドを最適化できます。
Parcelはしばらくの間、V8のサンプリングCPUプロファイラーを実行する--profileフラグをサポートしていました。--traceははるかに高レベルであり、関数レベルではなくプラグインレベルでパフォーマンスデータを見やすくします。どちらもChromeトレース形式でデータを出力します。これは、ChromeデベロッパーツールまたはPerfettoなどのより高度な分析ツールにロードできます。そこで、上記の質問のような質問に答えるために、データに対してSQLクエリを実行できます。
詳細については、ドキュメントをご覧ください。
さらに！
#上記の主要な機能に加えて、このリリースには多数の小さな機能とバグ修正が含まれていました。詳細は、完全なリリースノートをご覧ください。
このリリースに貢献してくれたすべての方に感謝します！