ViteからRsbuild(Rspack)に移行してみる

はじめに

Rspack 1.0 の発表されたついでに、ビルドツールをViteからRsbuildに移行してみる

Rsbuildについて

Rspack v1.0について

移行

今回はVueのプロジェクトを移行してみる

下記の公式ガイドがとても親切でわかりやすい
https://rsbuild.dev/guide/migration/vite
今回はVueなので下記を利用
https://rsbuild.dev/plugins/list/plugin-vue

vite.config.jsからrsbuild.config.mjsに変更する

vite.config.js

-import { fileURLToPath, URL } from 'node:url'
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'

-export default defineConfig({
-  plugins: [
-    vue(),
-  ],
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
-    }
-  }
-})

rsbuild.config.mjs

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from '@rsbuild/core';
import { pluginVue } from '@rsbuild/plugin-vue';

export default defineConfig({
  plugins: [pluginVue()],
  html: {
    template: './index.html',
  },
  source: {
    entry: {
      index: './src/main.js',
    },
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});

ビルドエントリは
Vite index.html => Rsbuild src/index.js　になるため、上記のように記述する
https://rsbuild.dev/guide/migration/vite#build-entry

index.html の 下記は削除

index.html

-  <script type="module" src="/src/main.js"></script>

ベースURLは
Viteだと　import.meta.env.BASE_URL　
Rsbuildだと　process.env.ASSET_PREFIX になる
https://rsbuild.dev/guide/advanced/env-vars#processenvasset_prefix

package.jsonも変更

package.json

  "scripts": {
-     "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
    "dev": "rsbuild dev",
    "build": "rsbuild build",
    "preview": "rsbuild preview"
  }

ビルド速度について

ファイルが少ないVueのプロジェクトで移行して全く参考にならないので

正確なベンチマークは下記を参考にしてください。🙇‍♂️

(個人の感想)

移行してみた体感としてはnpm run devの速度は変わらないが🤔、、、

npm run buildの速度が速くなった😄

さいごに

RspackはBreakthrough of the Year Awardを受賞していたり、人気が出ているので

今後も注目していきたい。あと、Rspackの蟹のキャラクターがとても可愛い!!🦀

追記、最近だとFarm🧑‍🌾っていうのも速いらしい