Frontend Academy · บทเรียน

esbuild: ความเร็วและข้อจำกัด

ใช้ esbuild เป็นตัวรวมชุดแบบสแตนด์อโลน และทำความเข้าใจว่าเหตุใดจึงเร็วกว่า webpack หลายลำดับขนาด รวมถึงข้อจำกัดปัจจุบันด้านปลั๊กอินและชนิดข้อมูล

esbuild: ความเร็วและข้อจำกัด เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

esbuild คืออะไร

esbuild คือเครื่องมือรวมบันเดิลและลดขนาดไฟล์ที่เขียนด้วย Go โดยเร็วกว่าเครื่องมือรวมบันเดิลที่ใช้ JavaScript 10–100 เท่า เนื่องจากรองรับการทำงานหลายเธรดแบบเนทีฟและไม่มีค่าใช้จ่ายในการเริ่มต้น ถูกสร้างโดย Evan Wallace (Figma)

การเปรียบเทียบความเร็ว

เมื่อรวมซอร์สโค้ดของ React (ประมาณ 6 MB): esbuild ใช้เวลาประมาณ 0.4 วินาที, Webpack ประมาณ 9 วินาที, Rollup ประมาณ 6 วินาที และ Parcel ประมาณ 10 วินาที ความเร็วนี้มาจาก Go (คอมไพล์แล้ว), การทำงานแบบขนาน, การไม่แปลง AST ระหว่างแต่ละรอบการประมวลผล และสถาปัตยกรรมที่เรียบง่าย

การใช้ esbuild โดยตรง

ติดตั้งและเรียกใช้ผ่าน CLI

npm install -D esbuild

npx esbuild src/app.ts \
  --bundle \
  --outfile=dist/app.js \
  --minify \
  --sourcemap \
  --target=es2020 \
  --platform=browser

API สำหรับเรียกใช้ด้วยโปรแกรม

เรียกใช้จากสคริปต์สร้างเพื่อควบคุมการทำงานได้มากขึ้น

// build.js
import { build } from 'esbuild';

await build({
  entryPoints: ['src/app.ts'],
  bundle: true,
  outfile: 'dist/app.js',
  minify: true,
  sourcemap: true,
  target: ['es2020'],
  platform: 'browser',
  define: { 'process.env.NODE_ENV': '"production"' }
});

TypeScript โดยไม่ใช้ tsc

esbuild จะตัดไวยากรณ์ของ TypeScript ออก (แปลง .ts เป็น .js) ได้เร็วกว่า tsc มาก แต่จะไม่ตรวจสอบชนิดข้อมูล — ให้เรียกใช้ tsc --noEmit แยกต่างหากสำหรับงานนี้

# Strip types and bundle in one go:
npx esbuild src/index.ts --bundle --outfile=dist/index.js

# Type-check separately (slower, can run in parallel):
npx tsc --noEmit

เซิร์ฟเวอร์พัฒนาพร้อมโหลดใหม่อัตโนมัติ

esbuild มีเซิร์ฟเวอร์พัฒนาในตัว พร้อมโหมดเฝ้าดูและ HMR ผ่าน API ของบริบท

import { context } from 'esbuild';

const ctx = await context({
  entryPoints: ['src/app.ts'],
  bundle: true,
  outdir: 'dist'
});

await ctx.watch();
await ctx.serve({ servedir: 'public', port: 8000 });

สถาปัตยกรรมปลั๊กอิน

esbuild รองรับปลั๊กอินที่มีฮุกหลักสองรายการ ได้แก่ onResolve (ดักจับการแก้ไขโมดูล) และ onLoad (จัดเตรียมเนื้อหาสำหรับโมดูลที่แก้ไขได้แล้ว)

const myPlugin = {
  name: 'env',
  setup(build) {
    build.onResolve({ filter: /^env$/ }, () => ({ path: 'env', namespace: 'env-ns' }));
    build.onLoad({ filter: /.*/, namespace: 'env-ns' }, () => ({
      contents: JSON.stringify(process.env),
      loader: 'json'
    }));
  }
};

ตัวโหลด

esbuild มีตัวโหลดในตัวสำหรับ: js, ts, jsx, tsx, json, css, text, base64, dataurl, file และ binary การรองรับ CSS มีเฉพาะการรวมบันเดิลเท่านั้น (ไม่มีโมดูลและไม่มี PostCSS) — ให้ใช้ปลั๊กอินหรือเครื่องมืออื่น

ข้อจำกัดเมื่อเทียบกับ Rollup/Vite

1) ระบบนิเวศปลั๊กอินมีขนาดเล็กกว่า 2) ไปป์ไลน์ CSS มีความสามารถจำกัด — ไม่มี CSS Modules, PostCSS หรือเครื่องมือประมวลผลล่วงหน้าในตัว 3) ไม่มี HMR สำหรับเฟรมเวิร์ก (เฟรมเวิร์กอย่าง React/Vue ต้องใช้ HMR เฉพาะของเฟรมเวิร์ก) 4) ไม่มีคำเตือนหรือการวิเคราะห์การตัดโค้ดที่ไม่ได้ใช้ออกจากบันเดิล 5) ยังรองรับการตั้งค่า SSR ที่ซับซ้อนได้ไม่สมบูรณ์เท่า

กรณีที่ esbuild โดดเด่น

1) การรวมบันเดิลของไลบรารี (มีจุดเริ่มต้นเดียวและไม่มีเฟรมเวิร์ก) 2) การจัดแพ็กเกจสำหรับ Lambda/Worker (เริ่มต้นแบบเย็นน้อยที่สุด) 3) เครื่องมือย่อยภายใน Vite/tsup (ใช้แปลง TS ภายใน) 4) การย้ายจาก tsc ไปใช้ไปป์ไลน์ TS ที่เร็วกว่า

esbuild ภายในเครื่องมืออื่น

Vite ใช้ esbuild เพื่อแปลง TS/JSX ระหว่างการพัฒนาและรวม node_modules ล่วงหน้า ส่วน tsup ใช้ esbuild เพื่อรวมบันเดิลของไลบรารี Rollup มีปลั๊กอิน esbuild เครื่องมือจำนวนมากผสานความเร็วของ esbuild เข้ากับประสบการณ์ใช้งานของตนเอง

tsup — ตัวห่อหุ้ม esbuild ที่เหมาะกับไลบรารี

สำหรับการเผยแพร่ไลบรารี npm tsup จะห่อหุ้ม esbuild ด้วยค่าเริ่มต้นที่เหมาะสม: สร้าง CJS + ESM + .d.ts, เฝ้าดูการเปลี่ยนแปลงระหว่างพัฒนา และรับการตั้งค่าแบบง่าย

# package.json
"scripts": { "build": "tsup src/index.ts --format esm,cjs --dts" }

ข้อแลกเปลี่ยนด้านขนาดบันเดิล

esbuild ลดขนาดไฟล์ได้รวดเร็ว แต่การลดขนาดของ esbuild มีความเข้มงวดน้อยกว่า Terser เล็กน้อย หากขนาดสำคัญกว่าความเร็วในการสร้าง ให้เรียกใช้ Terser เป็นขั้นตอนหลังสุดเพื่อให้ได้ผลลัพธ์ที่เล็กที่สุด

ตรวจสอบความเข้าใจ

esbuild สามารถใช้แทน tsc สำหรับคอมไพล์ TypeScript ได้ — แต่ esbuild ไม่ทำสิ่งใดที่ tsc ทำ

สรุป: esbuild

เครื่องมือรวมบันเดิลที่สร้างด้วย Go เร็วกว่าเครื่องมือรวมบันเดิลที่ใช้ JS 10–100 เท่า มีทั้ง CLI และ API สำหรับเรียกใช้ด้วยโปรแกรม ตัด TS ออกได้ (ไม่ตรวจสอบชนิดข้อมูล — ให้เรียกใช้ tsc --noEmit) ฮุกของปลั๊กอิน: onResolve + onLoad ข้อจำกัด: ระบบนิเวศปลั๊กอินมีขนาดเล็ก, ไปป์ไลน์ CSS มีความสามารถจำกัด, ไม่มี HMR สำหรับเฟรมเวิร์ก เหมาะที่สุดสำหรับ: ไลบรารี, Lambda/Workers และการใช้ภายใน Vite/tsup ใช้ตัวห่อหุ้ม tsup สำหรับไลบรารี npm

คำถามที่พบบ่อย

บทเรียน “esbuild: ความเร็วและข้อจำกัด” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “esbuild: ความเร็วและข้อจำกัด” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “esbuild: ความเร็วและข้อจำกัด”

ใช้ esbuild เป็นตัวรวมชุดแบบสแตนด์อโลน และทำความเข้าใจว่าเหตุใดจึงเร็วกว่า webpack หลายลำดับขนาด รวมถึงข้อจำกัดปัจจุบันด้านปลั๊กอินและชนิดข้อมูล คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “esbuild: ความเร็วและข้อจำกัด” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Frontend Academy