webpack v5.103.0がリリースされた。

主な新機能：

• DotenvPluginとトップレベルのdotenvオプションを追加
• WebpackManifestPluginを追加
• devtoolプラグインでignoreListオプションをサポート
• カスタムJavaScriptパース関数の使用が可能
• import.meta.envで環境変数をサポート
• import.meta.dirnameとimport.meta.filenameをサポート
• import.defer()をサポート
• import.meta.mainを処理
• JSONモジュールのnamed exportsを設定可能
• import file from "./file.json" with { type: "json" }でのnamed exportの使用を無効化可能
• universal targetで__dirname/__filename/import.meta.dirname/import.meta.filenameをサポート
• CSSのexportTypeオプションを追加（デフォルトはlink、textとcss-style-sheetも利用可能）
• CSSのcomposesプロパティをサポート

出展：webpack v5.103.0

Webpack v5.100.0 がリリースされ、ES modules 出力で HMR サポート、splitChunks 完全対応、新しい言語機能サポートが実装された。

ES modules 出力モードで Hot Module Replacement（HMR）をサポート。外部変数と runtimeChunk が設定されていない場合、ES module 出力モードでsplitChunksを完全サポート。Node.js ターゲット向けの ES modules worker chunk loading を有効化。

JavaScript のusingキーワードをサポート。tc39 Defer Module Evaluation（実験的機能）を実装。new URL(...)での動的テンプレートリテラル式をサポート。DefinePlugin の destructuring サポートを向上。

virtual:スキームをサポートする VirtualUrlPlugin を追加。ES modules 出力で不要な起動エントリーポイントランタイムを削除し、new URL(...)評価式のキャッシュ化でパフォーマンスを改善。

出展：Webpack v5.100.0

Rspack/Webpack と互換性のあるビルドアナライザーツールである Rsdoctor の 1.0 がリリース。

出展：https://rsdoctor.dev/blog/release/release-note-1_0

Rsdoctor は、Rspack と同様に ByteDance が開発しているツールであり、Rstack の一部。

State of React 2024 が公開。

https://2024.stateofreact.com/ja-JP/

ビルドツールの回答で、Vite が Webpack を 2%とはいえ追い越した。 ライブラリは先駆者有利であることが多く、ReduxはともかくCRAやAxiosは依然高い使用率を保っている。

https://2024.stateofreact.com/en-US/libraries/back-end-infrastructure/#build_tools

Rspack v1.0 がリリースされた。

https://rspack.dev/blog/announcing-1-0

#Rspack とは

Rspack とは ByteDance 製の Rust で書かれた Webpack 互換バンドラである。当初から Webpack の主要なローダーやプラグインをほぼそのまま利用できる他、Webpack と同様に JavaScript を用いて独自のローダーやプラグインを実装することが出来るなど、Webpack との互換性が非常に意識されている。

リリースノートでは、Webpack よりも 10 倍高速であり、既に ByteDance の Tiktok や Douyin などのプロダクトに加えて、Microsoft や Amazon、Alibaba などの企業でも採用されていると言及されている。

#互換性

Rspack は、ほぼ全ての Webpack API やエコシステム、ローダーに互換性を持っており、プラグインでも頻繁に利用されるものであれば 8 割をサポートまたは代替手段を提供していると言及されている。

#将来性

Webpack の後継としては Rspack が発表される以前から Turbopack が存在したが、Turbopack はそもそも Webpack との互換性を保証しておらず、Turbopack は基本的に Next.js 経由でユーザーが使うためかドキュメントが充実していないため、Webpack からの緩やかな移行先としては Webpack との高い互換性がありドキュメントの充実している Rspack は非常に有力である。

数年前に作られた Webpack を使用しているようなサービスでは、非常に良い選択肢だろう。

React Compiler が OSS として公開されました。Babel plugin として現状提供されており、IR/SSR への変換などは Rust で実装されています。

react/compiler at 149b917c8a4022aeaa170c4fb826107dd2333c68 · facebook/react

どのような変換が行われるかは React Compiler Playground で試すことが出来ます。

React Compiler Playground

合わせて React Compiler のドキュメントも公開されました。

React Compiler – React

次のような状況のようです。

• フィードバックを受けるために OSS 化された、まだ実験的な機能。
  • React v19 Beta 未満で利用するとエラーが出るようです。
• Vite と Webpack つまり Remix や Next.js でも動く。
  • Babel プラグインで提供されているので、Babel を使うように設定すれば使えるのは当たり前ではある。
  • Next.js は、既に option での提供を準備しているようです。
  • Babel で提供されたことに対してネガティヴな意見が見られるが、コアは Rust で分けて実装されているため、他の手段での提供も十分に考えられる。
• react-compiler-healthcheck や eslint-plugin-react-compiler を利用することで、正常にコンポーネントやライブラリを最適化できるかを確認できる。
  • React のルールに従っている、で問題なく動作することが条件のようです。
• 段階的に利用するために、ディレクトリ毎や、オプトインモード（アノテーションモード）によるコンポーネント・フック毎の React Compiler の導入もできる。
  • compilationMode: "annotation" オプションを渡すことで、use clientのようにuse memoを付けたコンポーネントやフックのみに適用できる。ただし、これは早期採用者を支援するための機能とのこと。

TikTok で有名な ByteDance が、Rust 製の Webpack 互換バンドラを公開しました。性能が Webpack と比べた数倍優れているだけでなく、Webpack のエコシステムとの互換性がとても意識されています。

https://github.com/web-infra-dev/rspack

#Webpack との互換性

設定ファイルの構成が Webpack と非常に似ており、Webpack の主要なローダーやプラグインをほぼそのまま利用できます。また Webpack と同様に、JavaScript を用いて独自のローダーやプラグインを実装することが出来ます。

#将来性

Webpack の後継としては、すでに Turbopack があり、当初から Webpack からの移行対応を行うと宣言していました。ですが、Turbopack は発表以降あまり大きな話題がありません。個人的にコミットログなどを見ていると開発体制があまり良くないのではないかなという気がしています。少なくともリリースノートは読みにくいです。

一方、Rspack はドキュメントが丁寧に書かれており、コミットのルールも徹底されているためリリースノートも読みやすいです。また今後 Webpack との統合も計画されており、Webpack チームと連携しているとのことなので、十分に将来性はあると思います。