Turbopack และ Build Performance

ไอเดียหลักในหนึ่งประโยค

Turbopack คือ bundler ของ Next.js ที่เขียนด้วย Rust ตอนนี้เป็น default ทั้ง next dev และ next build และเร่ง feedback loop ด้วยการ compile แบบ incremental แทนที่จะ rebuild ทุกอย่างใหม่

Turbopack เป็น default แล้ว

ใน Next.js ปัจจุบัน (เวอร์ชัน 16 ณ ตอนที่เขียน) Turbopack เป็น bundler default ทั้ง next dev และ next build ฝั่ง development กับ Turbopack นิ่งมาระยะหนึ่งแล้ว ส่วน path ของ production build เป็นชิ้นที่ใหม่กว่า ควรเช็กกับ docs ของเวอร์ชันที่คุณใช้จริง คุณไม่ต้องใส่ flag อะไรเพื่อเปิดใช้ — script ธรรมดาก็พอ

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

ถ้าเจอปัญหาแล้วต้องกลับไปใช้ bundler เดิม คุณ opt กลับไปใช้ webpack ได้เป็นราย command

{
  "scripts": {
    "dev": "next dev",
    "build": "next build --webpack",
    "start": "next start"
  }
}

Turbopack เร่งอะไรบ้าง

แก่นคือ incremental compilation Turbopack สร้าง dependency graph แล้วคำนวณใหม่เฉพาะส่วนที่ได้รับผลจากการเปลี่ยนแปลง cold start จึงเร็วขึ้นและ Hot Module Replacement ยังเกือบทันทีแม้แอปจะโตขึ้น เมื่อคุณ save ไฟล์ Turbopack จะ recompile เฉพาะ module นั้นกับตัวที่ขึ้นกับ module นั้น ไม่ใช่ทั้ง route

ต่างจาก webpack ยังไง

webpack คือ JavaScript bundler ที่สุกงอมและมี plugin ecosystem มหาศาล แต่แก่น JavaScript และแนวโน้มที่จะ rebuild ทั้งก้อนกลายเป็นคอขวดในแอปใหญ่ Turbopack เขียนด้วย Rust ออกแบบมาให้ทำงาน multi-core และถือว่างาน incremental แบบละเอียดเป็น default ไม่ใช่ของเสริม plugin และ loader ของ webpack บางตัวใช้ไม่ได้ — Next.js มีตัวเทียบเท่าให้เอง และคุณตั้งค่า Turbopack ใต้ key turbopack

// next.config.ts — Turbopack-specific configuration
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  turbopack: {
    // e.g. custom rules for importing SVGs as components
    rules: {},
  },
}

export default nextConfig

build caching

Turbopack เก็บงานลง disk ได้ การ start dev หรือ build ครั้งถัดไปจึงใช้ผล compile เดิมซ้ำแทนที่จะเริ่มจากศูนย์ filesystem cache นี้นิ่งแล้วสำหรับ development แต่ยัง experimental สำหรับ production build จึงควรถือว่า flag ฝั่ง build เป็นแบบ opt-in

// next.config.ts — persistent filesystem cache
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    turbopackFileSystemCacheForDev: true,
    turbopackFileSystemCacheForBuild: true,
  },
}

export default nextConfig

flowchart LR
  Save[Save a file] --> Graph[Dependency graph]
  Graph --> Changed[Recompile changed module + dependents]
  Graph --> Cache[Reuse unchanged from cache]
  Changed --> HMR[Fast HMR / build]
  Cache --> HMR

Incremental compilation reuses unchanged work