Stage 1 — Build & Tooling

Triết lý cốt lõi: Không chỉ "dùng tool", mà hiểu "tại sao chọn tool này".
Stage này là "cái búa" — bạn phải biết cầm búa đúng cách trước khi đóng đinh.

Phase: UNLEARN (Stage 1.1–1.3) → BRIDGE (Stage 1.4)
Teaching Model: 60% Teaching / 40% Questioning
Deliverable: 1 monorepo pnpm (2 packages), 1 app bundle bằng Vite từ đầu (không dùng template), 1 PR workflow demo với rebase/merge/cherry-pick, CI chạy lint + test trên GitHub Actions + 1 Decision Record: "Chọn bundler cho team 5 người".

Mục tiêu

Hiểu công cụ biên dịch và quản lý code trước khi viết app lớn. Mỗi module có Decision Record mẫu để tập quen với việc "decide trước khi code".

• Unlearn → Rebuild: Không dùng tool theo mặc định, mà hiểu trade-off giữa Webpack/Vite/Rspack, npm/yarn/pnpm, rebase/merge.
• Bridge: Bắt đầu chịu trách nhiệm decision — thiết kế repo cho team, chọn bundler có lý do.
• Staff Lens: Mỗi module có DR mẫu. 2 options đều khả thi, trade-off đau.

Tại sao Stage 1 tồn tại

• Bối cảnh thực tế: 90% lỗi "không hiểu sao import không work" hoặc "bundle toàn 2MB" đều xuất phát từ không hiểu bundler, module resolution, hoặc lockfile.
• Hậu quả nếu bỏ qua: Bạn sẽ mất 3 ngày debug "module not found" trong monorepo mà không hiểu workspace: protocol; hoặc deploy production mà quên source map; hoặc chọn tool vì "nó nhanh hơn" mà không biết trade-off.
• Output của Stage 1: Tự cấu hình được build tool từ zero, tự resolve lockfile conflict, tự quyết định rebase hay merge trong team, viết được DR có 2 options đều khả thi.

Danh sách module

Bundler & Build

Module	Nội dung	Mức độ	Phase	Status
1.1.1 Bundler Fundamentals	Webpack vs Vite vs Rspack, HMR, ESM vs CJS, Source Map	Foundation	UNLEARN	⬜
1.1.2 Bundle Analysis & Optimization	Tree-shaking, Code splitting, Bundle analysis, Minification	Application	UNLEARN	⬜

Package Manager & Monorepo

Module	Nội dung	Mức độ	Phase	Status
1.2.1 Package Manager & Lockfile	npm vs yarn vs pnpm, Lockfile, Peer dependencies, engines	Foundation	UNLEARN	⬜
1.2.2 Monorepo & Publishing	pnpm workspaces, changesets, Semantic Versioning, Dependency confusion	Application	UNLEARN	⬜

Git Workflow

Module	Nội dung	Mức độ	Phase	Status
1.3.1 Git Workflow & History	Rebase vs Merge, Interactive rebase, Cherry-pick, Branch strategy	Foundation	UNLEARN	⬜
1.3.2 Git Advanced & Recovery	git reflog, git bisect, Conventional Commits, Sparse checkout	Application	UNLEARN	⬜

Architecture Decision

Module	Nội dung	Mức độ	Phase	Status
1.4.1 Monorepo Architecture Decision	Staff thiết kế repo cho team. Turborepo, Remote caching, Decision Record mẫu	Application	BRIDGE	⬜

Stage 1 Staff Checkpoint

Tự đánh giá trước khi sang Stage 2. Nếu trả lời "Không" ở bất kỳ câu nào, quay lại module tương ứng.

#	Câu hỏi	Module
1	Tôi có giải thích được tại sao chọn Vite thay Webpack không? (không phải "vì nhanh hơn")	1.1.1
2	Tôi có phân tích được bundle size impact không? (tree-shaking thực sự hoạt động thế nào)	1.1.2
3	Tôi có thiết kế được monorepo cho 2 packages không? (dependency graph, task pipeline)	1.2.2
4	Tôi có viết được 1 Decision Record không? ("Chọn bundler cho team 5 người, 2 options đều khả thi")	1.4.1
5	Tôi có tính cost impact của bundle size trên CDN không?	1.1.2
6	Tôi có resolve được lockfile conflict mà không xoá node_modules không?	1.2.1
7	Tôi có publish được package lên npm đúng semver không?	1.2.2
8	Tôi có giải thích được khi nào rebase, khi nào merge không?	1.3.1
9	Tôi có cứu được commit mất bằng reflog không?	1.3.2

Nguyên tắc vàng

• Không dùng create-react-app hay Next.js template mà không hiểu config bên trong. Nếu không giải thích được tại sao sideEffects: false giúp tree-shaking, chưa sang Stage 2.
• Mỗi checkbox trong checklist là một kiến thức bạn PHẢI giải thích được cho người khác. Nếu không giải thích được, chưa hiểu sâu — quay lại học.
• Decision Record là bắt buộc: Mỗi lần chọn tool, phải viết DR có ít nhất 2 options đều khả thi, với trade-off rõ ràng. Không viết "vì nó nhanh hơn".