webpack to Rspack ~ Rspack移行の結果と注意点 ~
プロダクトのビルドツールを webpack から Rspack に移行したので、その経緯と注意点をまとめます。
🦀 Rspackとは？
Rustで書かれた高速なJavaScriptのバンドルツールです。 webpackエコシステムとの強力な互換性を持ちます。
2024/08/24にv1.0.0がリリースされました。
🤔 なぜRspackに移行したのか？
ビルド速度改善のため以前からwebpackの移行を検討していましたが、プロダクトがwebpack依存の構成[1]で、Viteやその他のビルドツールへの移行が少し面倒でした。 Rspackであればwebpackのプラグインもそのまま動き移行が容易、かつ速度改善が見込まれるためRspackへの移行を選びました。
💡 移行方法
移行方法は、rspackの公式ドキュメントの migrate from webpack をそのまま参考にして進めました。それだけで、devもproducitonもビルドは通ったので本当に楽でした。
修正内容
- webpack.config.js を rspack.config.js に変更
-
const webpack = require('webpack')をconst rspack = require('@rspack/core')に変更 -
MiniCssExtractPluginなど特定のプラグインをrspackの同等のプラグインに変更 -
ts-loaderなど特定のローダーをrspackのビルトインのローダーに変更 - 起動コマンドを
webpackからrspackに変更
🎉 移行結果
以下、プロダクトをビルドした結果の比較です。
📦 バンドル対象ファイル数
- TypeScript: 390
- Vue.js: 360
- Media File: 100
💻 PC spec
- CPU: Apple M1 Max
- RAM: 32GB
developmentビルド
| ツール | 5回実行の平均時間 |
|---|---|
| webpack | 18.0s |
| rspack | 8.0s |
（左がwebpack、右がrspack）
productionビルド
| ツール | 5回実行の平均時間 |
|---|---|
| webpack | 24.5s |
| rspack | 8.7s |
（左がwebpack、右がrspack）
爆速 🚀
🚨 移行時の注意点
devビルドはとくに移行に詰まることはありませんでしたが、prodビルドは中々詰まりどころがありました・・。
① CSSの読み込みエラーで画面が真っ白
RspackのcssExtractRspackPlugin で出力されるCSSのファイル名と、bundleされたJSが読み込み先として指定するCSSファイルのハッシュが微妙に異なり（JSから読み込み先として指定されるパスでは20文字ハッシュ、実際の出力は32文字ハッシュ）、CSSの読み込みエラーが発生。画面が真っ白に・・
対応
出力ファイル名の[name].[contenthash].cssを[name].[contenthash:20].cssとハッシュの長さを20に固定して解決（指定なしだと、32文字で出力。JSのハッシュは標準で20文字）。CssExtractRspackPluginのバグなのか、他プラグインとの互換性の問題なのか調査中。
plugins: [
new rspack.CssExtractRspackPlugin({
- filename: '[name].[contenthash].css',
+ filename: '[name].[contenthash:20].css',
}),
]
② 一部スタイルが適応されず画面が崩れる
自社コンポーネントライブラリのスタイルをsassでnode_modulesからimportしていましたが、なぜかprodビルドではバンドルから除外。一部CSSが読み込まれず、デザイン崩れが発生。
// これだけバンドルから除外される
@import '~hoge/dist/style.css';
対応
builtin:lightningcss-loader の最適化による挙動のようなので postcss-loader に変更して解決。ただ、ビルド速度が若干遅くなるので、回避策を検討中。
{
test: /\.(c|sc|sa)ss$/,
use: [
rspack.CssExtractRspackPlugin.loader,
{ loader: 'css-loader' },
- { loader: 'builtin:lightningcss-loader' },
+ { loader: 'postcss-loader' },
{ loader: 'sass-loader' },
],
},
③ 同名のハッシュで内容が異なるファイルが生成される
JSの出力ファイル名を [name].[chunkhash].js としているのに、なぜか同名で内容の異なるファイルが生成されました（本来はチャンクの内容が異なればハッシュも変わるはず）。CloudFront経由の配信でinvalidateが適切に行われず、一部過去キャッシュが使われてしまい画面が壊れました。
対応
ハッシュ形式を [contenthash] に変更して解決。webpackのビルドでは同様の問題は起こらないので、おそらくRspackのバグ。再現環境を構築して近々Issueを上げる予定です。
output: {
- filename: '[name].[chunkhash].js',
+ filename: '[name].[contenthash].js',
- chunkFilename: '[name].[chunkhash].js',
+ chunkFilename: '[name].[contenthash].js',
}
その他、今後同様のキャッシュ事故が起こらないようにreleaseのCIで以下スクリプトを実行して同名で内容が異なるファイルが生成されていないかチェックすることにしました。
#!/bin/bash
set -eu
# CI側でPRブランチとreleaseブランチをビルドして、
# それぞれのビルド結果を/tmp/currentと/tmp/releaseに配置する
dir1="/tmp/current"
dir2="/tmp/release"
different_files_found=0
# dir1内の全てのファイルを再帰的に探索
while IFS= read -r -d '' file1; do
relative_path="${file1#"$dir1"/}"
file2="$dir2/$relative_path"
if [ -f "$file2" ]; then
# 内容が異なるか検証
if ! cmp -s "$file1" "$file2"; then
echo "Different content: $relative_path"
different_files_found=1
fi
fi
done < <(find "$dir1" -type f -print0)
if [ $different_files_found -eq 1 ]; then
echo "🚨 同名で内容が異なるファイルが見つかりました。"
exit 1
else
echo "✅ 同名で内容が異なるファイルが見つかりませんでした。"
exit 0
fi
💭 おわりに
webpackから移行コストを抑えて、ビルド速度を上げたいのならRspackは良さそうです。ただProdビルドだけで起こる不具合もあり、まだ不安定なので移行は慎重に・・。（revertのrevertのrevetのrevet PRを作るくらい試行錯誤してました）
また、webpackほど成熟したエコシステムを持つプロダクトでも、こういう形で新しいビルドツールへ移行が進むと思うと考え深いです。既存のプラグインをそのまま使える状態でRustなど高速な言語で書き直すケースは今後も増えていきそうですね。今Viteで進んでいる Rollup -> Rolldownもその一例かもと思いました。
-
django-webpack-loaderでwebpackの出力するstatsを読み込み、djangoがエントリーポイントとなるhtmlを配信する構成。 ↩︎
Discussion