Files

T

Antigravity Agent 504fd5fb42 [G1-Sync] Manual knowledge update

2026-05-10 22:08:15 +09:00

7.2 KiB

Raw Blame History

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

title

Bun / Lightning CSS / esbuild Plugins

Modern build의 가장 빠른 부분. Bun (JS runtime + bundler), Lightning CSS (Rust CSS), esbuild plugins.

📖 핵심 개념

Bun: JS runtime + bundler + test + npm.
Lightning CSS: PostCSS 의 Rust 대체.
esbuild plugins: hook 을 plug.
모든 native = 10-100x 빠름.

💻 코드 패턴

Bun bundler (CLI)

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

Bun bundler (JS API)

const result = await Bun.build({
  entrypoints: ['src/index.ts'],
  outdir: 'dist',
  target: 'browser',
  format: 'esm',
  minify: true,
  splitting: true,
  sourcemap: 'external',
});

if (!result.success) {
  for (const m of result.logs) console.error(m);
}

Bun runtime

// Hot reload
bun --hot run server.ts

// SQLite native
const db = new Bun.SQLite('app.db');
db.query('SELECT * FROM users').all();

// Test
bun test

→ Node + npm + bundler + test 한 binary.

Bun.serve

// 빠른 HTTP server
Bun.serve({
  port: 3000,
  fetch(req) {
    return new Response('Hello');
  },
});

→ Hono / Express 의 alternative. 빠름.

Bun shell

import { $ } from 'bun';

await $`ls -la`;
const r = await $`echo hello`.text();

→ Cross-platform shell.

Lightning CSS (Rust CSS)

yarn add -D lightningcss

import { transform, bundle } from 'lightningcss';

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

→ PostCSS + autoprefixer + minify + nesting.

Vite + Lightning CSS

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

Tailwind 4 + Lightning CSS

Tailwind v4 가 Lightning CSS 사용 (Rust 기반).
- 100x 빠른 build.
- CSS-native (no JS config).

CSS nesting (native)

/* 모던 native nesting */
.card {
  padding: 16px;
  
  & h2 {
    font-size: 1.5rem;
  }
  
  &:hover {
    background: #eee;
  }
}

→ Lightning CSS 가 transform (구 browser).

esbuild plugin 작성

import { build, Plugin } from 'esbuild';

const myPlugin: Plugin = {
  name: 'my-plugin',
  setup(build) {
    // Resolve hook
    build.onResolve({ filter: /\.json$/ }, args => ({
      path: args.path,
      namespace: 'json',
    }));
    
    // Load hook
    build.onLoad({ filter: /.*/, namespace: 'json' }, async (args) => {
      const text = await fs.promises.readFile(args.path, 'utf8');
      return {
        contents: `export default ${text}`,
        loader: 'js',
      };
    });
    
    // End hook
    build.onEnd((result) => {
      console.log(`Built ${result.outputFiles?.length}`);
    });
  },
};

await build({
  entryPoints: ['index.ts'],
  bundle: true,
  outfile: 'out.js',
  plugins: [myPlugin],
});

Common esbuild plugins

- esbuild-plugin-svelte
- esbuild-plugin-vue
- esbuild-plugin-postcss
- esbuild-plugin-svgr
- esbuild-plugin-glob

Vite plugin (Rollup 기반)

import type { Plugin } from 'vite';

export function myPlugin(): Plugin {
  return {
    name: 'my-plugin',
    
    config(config) {
      // Modify config
    },
    
    transform(code, id) {
      if (id.endsWith('.special')) {
        return { code: transform(code) };
      }
    },
    
    resolveId(id) {
      if (id === 'virtual:my-module') return id;
    },
    
    load(id) {
      if (id === 'virtual:my-module') {
        return 'export default 42';
      }
    },
  };
}

Vite virtual module

// Plugin 가 virtual module
load(id) {
  if (id === 'virtual:routes') {
    const routes = scanFiles('src/routes');
    return `export default ${JSON.stringify(routes)}`;
  }
}

// User code
import routes from 'virtual:routes';

→ Build-time code generation.

Bundle 크기 분석

# esbuild
esbuild --analyze=verbose

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

CSS tree-shake

/* Used */
.btn { ... }

/* Unused */
.unused { ... }

// PurgeCSS 또는 Lightning CSS 의 unused class detection

→ Tailwind 가 자체.

CSS sourcemap

{
  sourceMap: true,
}

→ Browser DevTools 에서 original source.

Speed comparison

Webpack: baseline.
Vite (dev): 0.1x time.
Vite (build): 0.3x.
esbuild: 0.05x.
Bun build: 0.04x.

Bun 의 약점

- npm ecosystem 이 일부 안 작동.
- Production 안정성 (2026 stable 가 새).
- Tooling integration 부족.
- Native module 일부 X.

→ Side project / new = OK.
큰 enterprise = Node 가 안전.

Lightning CSS 의 약점

- PostCSS plugin 호환 X.
- 일부 modern CSS 기능 not yet.

→ Tailwind 4+ 가 가장 큰 user.

React + Bun

bun create vite my-app -- --template react-ts
cd my-app
bun install
bun run dev

→ Vite 가 그대로. Runtime 가 Bun.

Next.js + Bun

bun create next-app my-app
cd my-app
bun run dev

→ Next 가 Webpack/Turbopack 사용. Bun 가 npm replacement.

Production deploy (Bun)

FROM oven/bun:1
WORKDIR /app
COPY package.json bun.lockb ./
RUN bun install --production
COPY . .
CMD ["bun", "src/server.ts"]

→ Hono + Bun = 가장 빠른 stack.

Esbuild loader

{
  loader: {
    '.svg': 'text',         // SVG 가 string
    '.png': 'dataurl',      // base64
    '.txt': 'text',
    '.wasm': 'binary',
  },
}

Bun 의 .env

// 자동 load
import.meta.env.MY_VAR

// .env, .env.local, .env.{NODE_ENV}

→ Vite 와 비슷.

Workspace (monorepo)

// package.json
{
  "workspaces": ["packages/*", "apps/*"]
}

bun install
# → 모든 workspace install.

Future

- Bun 가 Node 대안 (실험적 → production)
- Lightning CSS = Tailwind 의 future
- esbuild / swc = compiler standard
- Webpack 의 share 줄어듦.

🤔 의사결정 기준

작업	추천
Modern Bun stack	Bun + Hono
React app	Vite + esbuild
큰 enterprise	Node + Vite
빠른 CLI	Bun shell
CSS-heavy	Lightning CSS
Tailwind 4	Lightning CSS (자동)
Custom build	esbuild plugin
Monorepo	Bun workspace

❌ 안티패턴

모든 거 Bun (production): 일부 깨짐.
PostCSS + Lightning CSS 둘 다: 충돌.
CSS tree-shake 없음: 큰 bundle.
Sourcemap prod: leak.
Big bun.lockb in git: OK (sync 위해).
ESM + CJS 혼동: import 깨짐.

🤖 LLM 활용 힌트

Bun = JS runtime + bundler + test + npm 한 binary.
Lightning CSS = Tailwind 4 + Rust.
esbuild plugin 가 pluggable.
Modern stack = native (Rust / Go) tool.

7.2 KiB Raw Blame History