Antigravity Agent
398 lines
7.5 KiB
Markdown
398 lines
7.5 KiB
Markdown
---
|
|
id: frontend-turbopack-rspack
|
|
title: Modern Bundlers — Turbopack / Rspack / esbuild / Bun
|
|
category: Coding
|
|
status: draft
|
|
source_trust_level: B
|
|
verification_status: conceptual
|
|
created_at: 2026-05-09
|
|
updated_at: 2026-05-09
|
|
tags: [frontend, build, vibe-coding]
|
|
tech_stack: { language: "TS / Rust", applicable_to: ["Frontend"] }
|
|
applied_in: []
|
|
aliases: [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+)
|
|
```bash
|
|
next dev --turbo
|
|
```
|
|
|
|
```js
|
|
// next.config.js
|
|
module.exports = {
|
|
experimental: {
|
|
turbo: {
|
|
rules: {
|
|
'*.svg': { loaders: ['@svgr/webpack'], as: '*.js' },
|
|
},
|
|
},
|
|
},
|
|
};
|
|
```
|
|
|
|
→ Webpack 대안. dev / production. Next 친화.
|
|
|
|
### Rspack (Webpack 호환)
|
|
```js
|
|
// 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 (가장 빠름)
|
|
```js
|
|
// 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,
|
|
});
|
|
```
|
|
|
|
```bash
|
|
# CLI
|
|
esbuild src/index.ts --bundle --outfile=dist/out.js
|
|
```
|
|
|
|
→ Go. 100x 빠른. Tree-shake / minify 약함.
|
|
|
|
### Vite (esbuild dev + Rollup prod)
|
|
```js
|
|
// 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
|
|
```bash
|
|
bun build src/index.ts --outfile=dist/out.js --target=browser
|
|
```
|
|
|
|
```ts
|
|
// JS API
|
|
await Bun.build({
|
|
entrypoints: ['src/index.ts'],
|
|
outdir: 'dist',
|
|
target: 'browser',
|
|
minify: true,
|
|
});
|
|
```
|
|
|
|
→ Bun runtime + bundler. 빠름. Plugin ecosystem 작음.
|
|
|
|
### swc (transformer, not bundler)
|
|
```js
|
|
// .swcrc
|
|
{
|
|
"jsc": {
|
|
"parser": { "syntax": "typescript", "tsx": true },
|
|
"target": "es2020",
|
|
"transform": { "react": { "runtime": "automatic" } }
|
|
}
|
|
}
|
|
```
|
|
|
|
```bash
|
|
swc src -d dist
|
|
```
|
|
|
|
→ Babel 대체 (10x+ 빠름). Next / Vite / Rspack 가 사용.
|
|
|
|
### Lightning CSS
|
|
```js
|
|
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
|
|
```js
|
|
export default defineConfig({
|
|
css: {
|
|
transformer: 'lightningcss',
|
|
lightningcss: {
|
|
targets: { chrome: 90, firefox: 90 },
|
|
},
|
|
},
|
|
});
|
|
```
|
|
|
|
### Parcel 2
|
|
```bash
|
|
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)
|
|
```ts
|
|
// 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
|
|
```bash
|
|
npm rm webpack webpack-cli
|
|
npm i @rspack/core @rspack/cli builtin:swc-loader
|
|
```
|
|
|
|
```js
|
|
// 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
|
|
```ts
|
|
// Dynamic import (모든 bundler 지원)
|
|
const Module = await import('./heavy-module');
|
|
```
|
|
|
|
```js
|
|
// Manual chunks (Vite / Rollup)
|
|
{
|
|
build: {
|
|
rollupOptions: {
|
|
output: {
|
|
manualChunks: {
|
|
react: ['react', 'react-dom'],
|
|
ui: ['@mui/material'],
|
|
},
|
|
},
|
|
},
|
|
},
|
|
}
|
|
```
|
|
|
|
### Tree-shaking
|
|
```ts
|
|
// 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
|
|
```js
|
|
// Vite
|
|
{ build: { sourcemap: true } }
|
|
|
|
// esbuild
|
|
{ sourcemap: 'external' }
|
|
|
|
// Rspack
|
|
{ devtool: 'source-map' }
|
|
```
|
|
|
|
→ Production = `hidden-source-map` (서버 만).
|
|
|
|
### Bundle analyze
|
|
```js
|
|
// 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
|
|
```bash
|
|
esbuild ... --watch
|
|
vite # default watch
|
|
rspack ... --watch
|
|
bun build ... --watch
|
|
```
|
|
|
|
→ < 100ms rebuild on save.
|
|
|
|
### Polyfill / browser target
|
|
```js
|
|
// 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]]
|