webpack to Rspack

webpack to Rspack 2024/10/02 Vue Fes Japan x TSkaigi 合同イベント @KawamataRyo

@KawamataRyo LAPRAS株式会社 元消防士 2児の父 懸垂, 個人開発

今日話すこと

今日話すこと プロダクトのビルド環境を webpackからRspackへ移 行した経緯と結果 ■ Rspackとは何か？ ■ なぜRspackへ移行したか？ ■ webpackとRspackの比較 ■ 移行時に詰まったところ ■ 所感

Rspackとは？

Rspackとは？ Rustで書かれた高速なJavaScriptのバン ドルツール。webpackエコシステムとの 強力な互換性を持ち、webpackからの移 行が容易。2024/08/24にv1.0.0がリリ ースされた。 https://rspack.dev/ Rspack The fast Rust-based web bundler Seamlessly replace webpack with compatible API Get Started Learn More

なぜRspackへ移行？

なぜRspackへ移行？ ビルド速度改善のためwebpackの移行を 検討していたが、プロダクトがwebpack 依存の構成 (django-webpack-loader) で、Viteへの移行が困難だった。 Rspackであればwebpackのプラグイン がそのまま動き、移行が容易。また問題が あってもwebpackに戻すことも可能なた めRspackを選択。

どんなプロジェクトで移行した？

どんなプロジェクトで移行した？ Django + Vue.jsのシンプルなSPA。アセットはCircleCIでビルドして、S3に配置、 CloudFrontで配信している。 バンドル対象ファイル数 Vue.js SFC: 360 TypeScript: 390 Media File: 100

移行した結果は？

移行した結果は？ devビルド

移行した結果は？ devビルド Rspack 7.7s

移行した結果は？ devビルド webpack 19.3s Rspack 7.7s

移行した結果は？ prodビルド

移行した結果は？ prodビルド Rspack 7.4s

移行した結果は？ prodビルド webpack 24.5s Rspack 7.4s

移行した結果は？ devビルド avg 18.0s -> 8.0s 2.2x faster prodビルド avg 24.5s -> 8.7s 2.8x faster

移行作業はどう？

移行作業はどう？ (devビルド) 特に問題なし！ Rspackのwebpack移行ガイドの通り行えばOK https://rspack.dev/guide/migration/webpack

移行作業はどう？ (Prodビルド) 結構詰まる！ devで問題ないから大丈夫だろ思っていると事故る

prodビルドで詰まったところ

prodビルドで詰まったところ CSSの読み込みエラーで画面が真っ白 RspackのcssExtractRspackPluginで出力されるCSSのファイル名と、bundleされたJSが読み込み として指定するCSSファイルのハッシュが微妙に異なり（読み込みは20文字ハッシュ、出力は32文字ハ ッシュ）、CSSの読み込みエラーが発生。画面が真っ白に。

prodビルドで詰まったところ CSSの読み込みエラーで画面が真っ白 RspackのcssExtractRspackPluginで出力されるCSSのファイル名と、bundleされたJSが読み込み として指定するCSSファイルのハッシュが微妙に異なり（読み込みは20文字ハッシュ、出力は32文字ハ ッシュ）、CSSの読み込みエラーが発生。画面が真っ白に。 対応 出力ファイル名の [name].[contenthash].css を [name].[contenthash:20].css とハッシュの 長さを20に固定して解決（指定なしだと、32文字で出力。JSのハッシュは標準で20文字）。 CssExtractRspackPluginのバグなのか、他プラグインとの互換性の問題なのか調査中。

prodビルドで詰まったところ 一部スタイルが適応されず画面が崩れる 自社コンポーネントライブラリのスタイルをsassでnode_modulesからimportしていたが、なぜか prodビルドではバンドルから除外。一部CSSが読み込まれず、デザイン崩れが発生。

prodビルドで詰まったところ 一部スタイルが適応されず画面が崩れる 自社コンポーネントライブラリのスタイルをsassでnode_modulesからimportしていたが、なぜか prodビルドではバンドルから除外。一部CSSが読み込まれず、デザイン崩れが発生。 対応 builtin:lightningcss-loader の最適化による挙動のようなので postcss-loader に変更して解 決。ただ、ビルド速度が若干遅くなるので、回避策を検討中。

prodビルドで詰まったところ 同名のハッシュで内容が異なるファイルが生成される JSの出力ファイル名を [name].[chunkhash].js としているのに、なぜか同名で内容の異なるファイ ルが生成される（本来はチャンクの内容が異なればハッシュも変わるはず）。CloudFront経由の配信で invalidateが適切に行われず、一部過去キャッシュが使われてしまい画面が壊れる。

prodビルドで詰まったところ 同名のハッシュで内容が異なるファイルが生成される JSの出力ファイル名を [name].[chunkhash].js としているのに、なぜか同名で内容の異なるファイ ルが生成される（本来はチャンクの内容が異なればハッシュも変わるはず）。CloudFront経由の配信で invalidateが適切に行われず、一部過去キャッシュが使われてしまい画面が壊れる。 対応 ハッシュ形式を [contenthash] に変更して解決。webpackのビルドでは同様の問題は起こらないの で、おそらくRspackのバグ。再現環境を構築して近々Issueを上げる予定。

Zennに記事を書いたので詳細はこちらに webpack to Rspack ~ Rspack移行の結 果と注意点 ~ ryo_kawamata https://zenn.dev/ryo_kawamata/articles/b2df9989fe2c6e

最後に

最後に webpackから移行コストを抑えて、ビルド速度を上げたいのならRspackはオスス メ。ただProdビルドだけで起こる不具合もあり、まだ不安定なので移行は慎重に。 webpackほど成熟したエコシステムを持つプロダクトでも、こういう形で新しいビル ドツールへ移行が進むと考えると感慨深い。RspackやRolldownしかり、Rustに書き換 えつつエコシステム維持というケースは今後さらに増えていきそう。

End