WebpackからRspackに移行してみる
Rspack とは
Webpack互換を目指したRustベースの高パフォーマンスモジュールバンドラ。
Webpackのよく使われるプラグインや機能がビルトインで用意されています。
2023年3月に公開されたばかり。
Webpackからの移行
公式のマイグレーションガイドがあるのでとりあえずこれに従ってみました。
設定を記述する上で補完や型チェックを効かせるために以下のような設定をするとよき。
// @ts-check
/** @type {import('@rspack/cli').Configuration} */
const config = {
entry: {
main: './src/index.js',
},
};
module.exports = config;
移行中につまづいたポイント
手元のReactプロジェクト（Webpack@4.41.0)で移行してみてつまづいたポイント。
ただ基本的には大したつまづきポイントもなく、すんなり移行できた印象。
一部のプラグインのオプションや設定に互換性がない
例えばbuiltins.htmlはhtml-webpack-pluginに相当するビルトイン機能だが、injectにBoolean値が渡せないようになっていたので対応する必要がありました。
おそらく他にもこういったものはあると思うのでちゃんと調べないと(当たり前)。
こういうページもあるので参考にしつつ。
cannot use 'import.meta' outside a module
devServer起動してブラウザからアクセスすると上記エラーが発生しました。
import.meta.envはサポートされていないようです。
下記issueにあるようにbuiltins.defineに追記しました。
{
builtins: {
define: {
'import.meta.env && import.meta.env.MODE': "'development'"
}
},
}
Uncaught ReferenceError: process is not defined
同じくdevServer起動してブラウザからアクセスすると上記エラーが発生しました。
これに関してはおそらくWebpack4→5でNode.jsのpolyfillの自動挿入が廃止になったことに起因するものと思われます。
こちらもbuiltins.defineに追記することで対応。
参考: https://zenn.dev/szgk/articles/2d0843136d2fa8
babel-loader
これはマイグレーションガイドにも書いてありますが、RspackはTypeScriptやJSXをビルトインサポートしているので、その用途ではbabel-loaderは不要なのですが、他の変換ロジックでbabel-loaderを使用している場合は依然としてconfigに記述する必要があります。
今回移行したプロジェクトではstyled-componentsを使用していたのでbabel-loaderへの依存関係は削除できませんでした。
ちなみに同じCSS-in-JSでもemotionはビルトインサポートされています
移行前後の比較
devサーバーの起動とビルド時間で比較(※3回の平均値)
| devサーバー起動 | ビルド | |
|---|---|---|
| 移行前 | 52.45s | 91.53s |
| 移行後 | 16.48s | 18.41s |
結果は一目瞭然ですね。
devサーバーの起動は約3倍、ビルドは約5倍早くなりました！
所感
・Webpack互換を目指しているだけあって移行は割と楽だった印象(Webpack→Viteとかに比べれば遥かに楽)
・公開されたのがまだ先月ということもあり、対応していないプラグインもかなりある
・速い！
最後に
まだ商用で使うには怖いですし、プラグイン対応もまだまだこれからな感じですが、Webpackから移行するなら、ViteやTurboPackよりも遥かに楽だと思うので、Webpack使ってて速度気になるけどなかなか移行できない...みたいなプロジェクトには刺さりそうです。
今後も注目していきたいですね。
Discussion