2nd/10_Wiki/Topics/Coding/Frontend_Turbopack_Rspack.md

id, title, category, status, source_trust_level, verification_status, created_at, updated_at, tags, tech_stack, applied_in, aliases

id	title	category	status	source_trust_level	verification_status	created_at	updated_at	tags	tech_stack	applied_in	aliases
frontend-turbopack-rspack	Modern Bundlers — Turbopack / Rspack / esbuild / Bun	Coding	draft	B	conceptual	2026-05-09	2026-05-09	frontend build vibe-coding	language applicable_to TS / Rust Frontend		Turbopack Rspack esbuild swc Bun bundler Lightning CSS Parcel 2

Modern Bundlers

Webpack 보다 10-100x 빠른 native bundler. Turbopack (Next), Rspack, esbuild, swc, Bun. Rust / Go 가 build 시간 ↓.

📖 핵심 개념

• JS bundler 가 JS = 느림.
• Rust / Go = 10x+ 빠름.
• HMR < 100ms.
• Webpack-compatible plugin (Rspack).

💻 코드 패턴

Turbopack (Next.js 14+)

next dev --turbo

// next.config.js
module.exports = {
  experimental: {
    turbo: {
      rules: {
        '*.svg': { loaders: ['@svgr/webpack'], as: '*.js' },
      },
    },
  },
};

→ Webpack 대안. dev / production. Next 친화.

Rspack (Webpack 호환)

// rspack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.tsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      { test: /\.tsx?$/, use: 'builtin:swc-loader' },
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
    ],
  },
};

→ Webpack config 거의 그대로. Rust = 10x 빠름.

esbuild (가장 빠름)

// build.js
import * as esbuild from 'esbuild';

await esbuild.build({
  entryPoints: ['src/index.tsx'],
  bundle: true,
  outfile: 'dist/bundle.js',
  format: 'esm',
  target: 'es2020',
  minify: true,
  sourcemap: true,
});

# CLI
esbuild src/index.ts --bundle --outfile=dist/out.js

→ Go. 100x 빠른. Tree-shake / minify 약함.

Vite (esbuild dev + Rollup prod)

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    target: 'es2020',
    rollupOptions: {
      output: { manualChunks: { vendor: ['react', 'react-dom'] } },
    },
  },
});

→ Dev = esbuild + native ESM (instant). Prod = Rollup (optimize).

Bun bundler

bun build src/index.ts --outfile=dist/out.js --target=browser

// JS API
await Bun.build({
  entrypoints: ['src/index.ts'],
  outdir: 'dist',
  target: 'browser',
  minify: true,
});

→ Bun runtime + bundler. 빠름. Plugin ecosystem 작음.

swc (transformer, not bundler)

// .swcrc
{
  "jsc": {
    "parser": { "syntax": "typescript", "tsx": true },
    "target": "es2020",
    "transform": { "react": { "runtime": "automatic" } }
  }
}

swc src -d dist

→ Babel 대체 (10x+ 빠름). Next / Vite / Rspack 가 사용.

Lightning CSS

import { transform } from 'lightningcss';

const { code } = transform({
  filename: 'main.css',
  code: Buffer.from(css),
  minify: true,
  targets: { chrome: 90 },
});

→ PostCSS 대체. Native CSS minify + autoprefixer + nesting.

Vite + Lightning CSS

export default defineConfig({
  css: {
    transformer: 'lightningcss',
    lightningcss: {
      targets: { chrome: 90, firefox: 90 },
    },
  },
});

Parcel 2

parcel src/index.html

→ Zero-config. Type-safe + tree-shake. Webpack 보다 simple.

Build performance 비교

프로젝트: 10k LOC TS, React.

Webpack 5:    25 sec
esbuild:      0.5 sec
Vite (dev):   0.3 sec (ESM)
Vite (build): 8 sec (Rollup)
Turbopack:    0.5 sec
Rspack:       1.5 sec
Bun:          0.4 sec

→ esbuild / Bun 가 가장 빠름. Turbopack 가 dev 친화.

HMR (Hot Module Replacement)

// Vite — automatic
if (import.meta.hot) {
  import.meta.hot.accept((newModule) => {
    // ...
  });
}

→ < 100ms. State 보존.

Plugin ecosystem

Webpack: 가장 큰 (10년)
Rspack: Webpack 호환 = 큰
Vite: 중간 (Rollup plugin 호환)
esbuild: 작음
Turbopack: 작음 (Next 친화)
Bun: 작음

Migration: Webpack → Rspack

npm rm webpack webpack-cli
npm i @rspack/core @rspack/cli builtin:swc-loader

// rspack.config.js (Webpack config 거의 동일)
const config = require('./webpack.config');
config.module.rules.forEach(r => {
  if (r.use === 'babel-loader') r.use = 'builtin:swc-loader';
});
module.exports = config;

→ 1-2 시간 작업. 10x 빌드 빠름.

Code splitting

// Dynamic import (모든 bundler 지원)
const Module = await import('./heavy-module');

// Manual chunks (Vite / Rollup)
{
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          react: ['react', 'react-dom'],
          ui: ['@mui/material'],
        },
      },
    },
  },
}

Tree-shaking

// Side-effect free (package.json)
{
  "sideEffects": false
}

// 또는 specific
"sideEffects": ["**/*.css"]

→ Unused export 제거.

ESM vs CJS

Modern: ESM (import / export)
Legacy: CJS (require / module.exports)

Tree-shake = ESM 만.
모든 modern bundler = ESM 우선.

Source map

// Vite
{ build: { sourcemap: true } }

// esbuild
{ sourcemap: 'external' }

// Rspack
{ devtool: 'source-map' }

→ Production = hidden-source-map (서버 만).

Bundle analyze

// rollup-plugin-visualizer (Vite)
import { visualizer } from 'rollup-plugin-visualizer';
plugins: [visualizer()]

// Rspack
import { BundleAnalyzerPlugin } from '@rspack/plugin-bundle-analyzer';

→ HTML 가 chunk size + dep tree.

CSS-in-JS 의 문제

Emotion / styled-components 가 runtime cost.
Modern: CSS Module + Lightning CSS / Vanilla Extract / Panda CSS / Tailwind.

→ Build-time CSS = 0 runtime cost.

Incremental build

Vite / Rspack / Turbopack:
- 변경 file 만 rebuild
- Cache disk 에 (memo)

→ Full rebuild 거의 X.

Production build 권장

Vite + Rollup: balance (안정 + 빠름)
Rspack: Webpack 마이그레이션 부드러움
Next + Turbopack: Next.js 친화
esbuild: 빠름 + 작은 plugin
Bun: 가장 빠름, ecosystem 작음

Watch mode

esbuild ... --watch
vite       # default watch
rspack ... --watch
bun build ... --watch

→ < 100ms rebuild on save.

Polyfill / browser target

// Vite
{ build: { target: ['chrome90', 'firefox90', 'safari14'] } }

// esbuild
{ target: ['chrome90'] }

// Babel preset-env (Webpack)
{ targets: '> 0.5%, last 2 versions' }

Dev server

Vite: HTTP/1.1 + ESM (instant)
Webpack dev server: bundle (느림)
Turbopack: incremental

Future

- Rolldown (Vite 의 Rust Rollup) — 2025+
- Bun bundler 점진 성숙
- Turbopack stable
- swc 가 dominate compiler

→ Webpack 의 share 줄어듦.

🤔 의사결정 기준

상황	추천
New React app	Vite
New Next.js	Turbopack
Webpack migrate	Rspack
Library author	tsup (esbuild) / Vite
Bun runtime	Bun bundler
큰 enterprise (legacy)	Rspack (Webpack 호환)
Build speed 가 결정	esbuild

❌ 안티패턴

• Webpack 만: 10x 느린 build.
• Babel + Webpack new project: swc + Vite/Rspack.
• CommonJS lib: tree-shake X.
• No code split: 큰 main bundle.
• CSS-in-JS runtime: hydration cost.
• Source map prod: 노출.
• Bundle analyze 없음: bloat 모름.

🤖 LLM 활용 힌트

• Vite / Turbopack / Rspack 가 default.
• esbuild + swc = 빠른 transformer.
• Lightning CSS = PostCSS 대체.
• 큰 codebase = Rspack (Webpack compat).

🔗 관련 문서

• Frontend_Tailwind_Architecture
• TS_Build_Bundler_Patterns
• Perf_Bundle_Analysis