Rspack 완벽 가이드 — Rust 기반 Webpack 호환 번들러, 10배 빠른 대체재

왜 Rspack인가

번들러	속도	Webpack 호환	생태계	주 용도
Webpack	느림	-	최대	레거시·플러그인 중심
Vite	매우 빠름	낮음	큼	신규·SPA
Turbopack	빠름	낮음	Next 중심	Next.js
esbuild	매우 빠름	낮음	중간	라이브러리 빌드
Rspack	매우 빠름	매우 높음	빠르게 확장	대형 Webpack 레거시·MF

“Webpack을 바꾸고 싶지만 loader/plugin은 유지하고 싶다”는 정확한 지점을 공략.

설치 (Rsbuild 권장)

pnpm create rsbuild@latest
# 템플릿: React / Vue / Svelte / Lit / Preact / Vanilla / Node / 등

cd my-app
pnpm dev

pnpm add -D @rsbuild/core @rsbuild/plugin-react

// rsbuild.config.ts
import { defineConfig } from "@rsbuild/core"
import { pluginReact } from "@rsbuild/plugin-react"

export default defineConfig({
  plugins: [pluginReact()],
  source: { entry: { index: "./src/index.tsx" } },
  html: { template: "./public/index.html" },
  server: { port: 3000 },
})

• TypeScript·JSX·CSS Modules·PostCSS·SCSS 기본 지원
• dev 서버에 HMR·빠른 리스타트

Rspack 직접 사용

pnpm add -D @rspack/core @rspack/cli @rspack/dev-server

// rspack.config.js
const { rspack } = require("@rspack/core")

module.exports = {
  entry: "./src/index.tsx",
  output: {
    path: __dirname + "/dist",
    filename: "[name].[contenthash].js",
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.(jsx?|tsx?)$/,
        use: {
          loader: "builtin:swc-loader",
          options: {
            jsc: {
              parser: { syntax: "typescript", tsx: true },
              transform: { react: { runtime: "automatic" } },
            },
          },
        },
      },
      { test: /\.css$/, use: [rspack.CssExtractRspackPlugin.loader, "css-loader"] },
      { test: /\.(png|svg|jpg)$/i, type: "asset" },
    ],
  },
  plugins: [
    new rspack.HtmlRspackPlugin({ template: "./public/index.html" }),
    new rspack.CssExtractRspackPlugin({ filename: "[name].[contenthash].css" }),
  ],
  optimization: {
    splitChunks: { chunks: "all" },
    minimizer: [new rspack.SwcJsMinimizerRspackPlugin(), new rspack.LightningCssMinimizerRspackPlugin()],
  },
  devServer: { port: 3000, hot: true, historyApiFallback: true },
}

Webpack 설정과 거의 동일한 구조. require("webpack") → require("@rspack/core"), 일부 plugin 이름 교체가 이주의 핵심.

실측 퍼포먼스

ByteDance 공식 벤치마크(중형 React 앱):

지표	Webpack 5	Vite	Rspack
프로덕션 빌드	40초	-	6초
Cold start(dev)	10초	1초	1.5초
HMR	1-3초	즉시	즉시
대형 모노레포 빌드	5분	(SSR 미지원)	30초

대형 MF 환경에서의 이점이 특히 큽니다.

Module Federation

// rspack.config.js
const { ModuleFederationPlugin } = require("@module-federation/enhanced/rspack")

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: "host",
      remotes: {
        app1: "app1@http://localhost:3001/mf-manifest.json",
        app2: "app2@http://localhost:3002/mf-manifest.json",
      },
      shared: { react: { singleton: true }, "react-dom": { singleton: true } },
    }),
  ],
}

Rspack은 MF 2.0의 주요 런타임이며 매니페스트 기반 dynamic remote·타입 안전 원격 import를 지원합니다.

마이그레이션: Webpack → Rspack

1단계: 의존성 교체

pnpm remove webpack webpack-cli webpack-dev-server
pnpm add -D @rspack/core @rspack/cli @rspack/dev-server

2단계: 설정 교체

- const webpack = require("webpack")
+ const { rspack } = require("@rspack/core")

- new webpack.DefinePlugin({ ... })
+ new rspack.DefinePlugin({ ... })

- new HtmlWebpackPlugin({ ... })
+ new rspack.HtmlRspackPlugin({ ... })

- new MiniCssExtractPlugin({ ... })
+ new rspack.CssExtractRspackPlugin({ ... })

- use: ["babel-loader"]
+ use: { loader: "builtin:swc-loader", options: { ... } }

3단계: 스크립트

{
  "scripts": {
    "dev": "rspack serve",
    "build": "rspack build",
    "analyze": "rspack build --analyze"
  }
}

4단계: 테스트·점진 롤아웃

• CI에서 Webpack·Rspack 동시 빌드 → 산출물 diff 확인
• 작은 패키지부터 전환, 문제 발생 시 롤백 쉽게

Rsbuild 주요 기능

// rsbuild.config.ts
import { defineConfig } from "@rsbuild/core"
import { pluginReact } from "@rsbuild/plugin-react"
import { pluginSass } from "@rsbuild/plugin-sass"

export default defineConfig({
  plugins: [pluginReact(), pluginSass()],

  output: {
    assetPrefix: "https://cdn.example.com/",
    cleanDistPath: true,
    sourceMap: { js: process.env.NODE_ENV === "production" ? "source-map" : "cheap-module-source-map" },
  },

  performance: {
    removeConsole: ["log", "info"],
  },

  html: {
    template: "./public/index.html",
    title: "pkglog",
    meta: {
      description: "Expert dev blog",
      viewport: "width=device-width, initial-scale=1",
    },
  },

  server: {
    port: 3000,
    proxy: {
      "/api": "http://localhost:4000",
    },
  },
})

• @rsbuild/plugin-* 생태계로 Sass·Less·PostCSS·Vue·Svelte·Preact·Solid·Lit·Node 서버 빌드까지 커버
• 환경 변수·asset·HTML 설정이 선언적

SSR/SSG

import { defineConfig } from "@rsbuild/core"
import { pluginReact } from "@rsbuild/plugin-react"

export default defineConfig({
  plugins: [pluginReact()],
  environments: {
    web:  { output: { target: "web" }, source: { entry: { index: "./src/entry.client.tsx" } } },
    node: { output: { target: "node" }, source: { entry: { ssr:   "./src/entry.server.tsx" } } },
  },
})

클라이언트·서버 번들을 동시 생성하는 환경 분리 내장.

Rslib: 라이브러리 빌드

pnpm create rslib@latest

// rslib.config.ts
import { defineConfig } from "@rslib/core"

export default defineConfig({
  source: { entry: { index: "./src/index.ts" } },
  output: { target: "web" },
  lib: [
    { format: "esm", dts: true },
    { format: "cjs" },
    { format: "umd", umdName: "MyLib" },
  ],
})

tsup·unbuild 대안. ESM/CJS/UMD 다중 포맷 + 타입 선언 자동 생성.

Rspress: 문서 사이트

pnpm create rspress@latest

VitePress/Docusaurus 대안. MDX·i18n·검색 내장, Rspack으로 빠른 개발.

SWC 설정

Rspack은 Babel 대신 SWC 기반 변환을 내장.

// rsbuild.config.ts
export default defineConfig({
  tools: {
    swc: {
      jsc: {
        experimental: {
          plugins: [
            ["@swc/plugin-emotion", {}],
          ],
        },
      },
    },
  },
})

기존 Babel 프리셋 대부분은 SWC에 네이티브 대응이 있으며 변환 속도는 10배 이상 빠름.

코드 스플리팅·Lazy

const Dashboard = React.lazy(() => import("./Dashboard"))

<Suspense fallback={<Loading />}>
  <Dashboard />
</Suspense>

Rspack이 자동으로 chunk 생성, optimization.splitChunks로 세밀 제어.

CSS

• CSS Modules, PostCSS, CSS-in-JS 지원
• @rsbuild/plugin-css-minimizer → Lightning CSS 기반
• Tailwind CSS v4 플러그인 @tailwindcss/postcss 또는 Vite 스타일 @tailwindcss/vite 패키지 사용

Node.js 타겟 / 서버 빌드

export default defineConfig({
  output: { target: "node" },
  source: { entry: { server: "./src/server.ts" } },
})

Node 서버, Cloudflare Workers, Electron main 등 다양한 타겟 지원.

트러블슈팅

일부 Webpack plugin 호환 안 됨

• Rspack 공식 plugin 대체 확인
• @rspack/plugin-* 또는 JS API 기반 커스텀 plugin 작성

dev HMR이 Vite보다 약간 느림

• 초기 파일 스캔·index 빌드 단계 → 정상
• source.include로 필요 범위만 변환

babel 의존 로직이 있음

• 대부분 SWC 플러그인으로 이전 가능
• 정 불가하면 @rsbuild/plugin-babel로 Babel 병행

Module Federation runtime 오류

• @module-federation/enhanced 최신 사용
• 버전 매트릭스 확인 (Host·Remote)

빌드 산출물이 Webpack과 미묘하게 다름

• tree-shaking 차이·chunk 분할 전략 차이
• optimization.splitChunks·chunkIds 명시로 동기화

프로덕션 체크리스트

• build 산출물 Webpack 버전과 diff
• 소스맵 전략 결정 (source-map vs hidden-source-map)
• 번들 분석 (--analyze 또는 Rsdoctor)
• CDN·assetPrefix 설정
• Module Federation 매니페스트 CDN 캐시 정책
• HMR·proxy·historyApiFallback 개발 서버 설정
• CI에서 캐시(빌드 캐시) 활용

체크리스트

• 신규는 Rsbuild·Rslib·Rspress로 시작
• Webpack 레거시는 Rspack 1:1 이주로 속도만 획득
• SWC 기반 transform 활용, Babel 의존 점진 제거
• Module Federation에서 성능 이점 극대화
• Rsdoctor로 번들 디버깅
• Tailwind v4·shadcn/ui·TanStack Query 등 최신 프런트 스택과 조합

마무리

Rspack은 “Webpack의 거대한 레거시를 버리지 않고도 Rust의 속도를 얻는다”는 실용적 해법으로 빠르게 자리잡은 번들러입니다. Vite·Turbopack이 만든 “Rust 번들러 시대”의 다른 축으로, 특히 대형 모노레포·Module Federation·복잡한 커스텀 loader 환경에서 가치가 큽니다. Rsbuild·Rslib·Rspress로 고수준 툴킷까지 확장된 생태계는 신규 프로젝트에도 경쟁력 있는 선택지이며, ByteDance의 대규모 내부 사용이 안정성과 지속성을 뒷받침합니다. Webpack 빌드 시간에 시달리는 팀이라면 하루 안에 시범 이주해보는 것을 강력히 추천합니다.

관련 글

• Webpack 완벽 가이드
• Vite 완벽 가이드
• Turbopack 가이드
• 마이크로 프런트엔드 아키텍처 가이드