- Webpack là gì? Vai trò trong modern web development?
Webpack là module bundler gộp toàn bộ asset (JS, CSS, ảnh) thành các file bundle đã tối ưu. Khái niệm cốt lõi: - Entry — điểm bắt đầu của dependency graph, thường là src/index.js. - Output — nơi ghi bundle ra, ví dụ dist/bundle.js. -…
- Loaders và Plugins trong Webpack khác nhau như thế nào?
Quy tắc kinh nghiệm: cần biến đổi một loại file → loader; cần can thiệp vào tiến trình build → plugin. Loader biến đổi file thành module, hoạt động ở mức từng file trong pipeline resolve module. Thứ tự chạy là phải sang trái (dưới…
- Vite là gì? Tại sao nhanh hơn Webpack trong development?
Vite là build tool thế hệ mới của Evan You. Dev server không bundle — browser hỏi file nào thì Vite transform đúng file đó qua native ESM, nên cold start gần như tức thì bất kể project lớn cỡ nào. - esbuild pre-bundling: lần…
- Sự khác biệt giữa Vite dev server và Webpack dev server?
Cold start: Webpack dev server phải bundle toàn bộ module graph rồi server mới sẵn sàng — project 1000 module mất 10-30 giây. Vite khởi động dưới 1 giây bất kể project to cỡ nào, vì nó không pre-bundle source. - Pre-bundle dependency: Vite dùng…
- Babel là gì? Vai trò trong JavaScript toolchain?
Babel là JavaScript compiler với 3-phase pipeline: Parse (source code → AST via @babel/parser), Transform (plugins traverse và modify AST — ví dụ arrow function plugin chuyển () = {} thành function() {}), Generate (AST → output code via @babel/generator). Polyfills vs transforms: transforms là…
- SWC là gì? So sánh với Babel?
SWC (Speedy Web Compiler) là compiler JS/TS viết bằng Rust — nhanh hơn Babel 20-70 lần khi chạy đơn luồng, và tới 70 lần khi tận dụng nhiều core. - Trong Next.js: từ bản 12, SWC thay Babel ở khâu transpile và thay Terser ở…
- pnpm khác npm và yarn như thế nào?
pnpm dùng content-addressable store: mỗi package version lưu một lần trong global store (~/.pnpm-store), tất cả projects symlink đến store — tiết kiệm disk đáng kể (100 projects dùng React chỉ lưu 1 copy). nodemodules structure: pnpm tạo non-flat nodemodules — mỗi package chỉ thấy…
- Monorepo là gì? Công cụ phổ biến để quản lý monorepo?
- Tree shaking là gì? Điều kiện để tree shaking hoạt động?
- Microservices vs monolith frontend architecture. Federated module?
Monolith frontend là kiến trúc một repo chứa toàn bộ code frontend, đơn giản nhưng khó scale khi team lớn vì mọi thay đổi đều phải deploy cùng lúc. Micro-frontend chia frontend thành nhiều ứng dụng nhỏ độc lập, mỗi team quản lý và deploy…
- HMR (Hot Module Replacement) hoạt động như thế nào?
Vite HMR nhanh hơn Webpack vì native ESM — chỉ invalidate module thay đổi thay vì recompile bundle graph; React Fast Refresh giữ component state khi edit function body, remount khi thay đổi hook order. HMR thay thế modules trong running app mà không reload…
- Source maps là gì? Cách cấu hình cho development và production?
Không serve .map files publicly trong production — upload lên Sentry/Datadog trong CI để lấy readable stack traces mà không expose source code; hidden-source-map là strategy chuẩn cho production bundles. Source maps ánh xạ compiled/minified code về original source code — khi error xảy ra…
- ESM vs CommonJS: tại sao ecosystem đang chuyển sang ESM?
ESM là standard với static imports và tree shaking — CJS dynamic require() không tree-shakeable; browser native support ESM; Vite dev server nhanh vì không bundle, serve native ESM; CJS không thể require() ESM (async). CommonJS (CJS): require() synchronous, dynamic (có thể dùng trong if/function),…
- Dynamic import() và code splitting: cách implement hiệu quả?
- Tree shaking deep dive: tại sao một số packages không tree-shakeable?
