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 trong production bundle, stack trace hiển thị file/line trong TypeScript source thay vì minified gibberish. Format: file .map JSON chứa mappings từ generated code → source; referenced trong bundle qua //# sourceMappingURL=bundle.js.map. Types trong Webpack/Vite: eval-source-map (dev, fast rebuild, in-bundle); source-map (production, external .map file, full quality); hidden-source-map (không expose URL trong bundle, upload .map file lên error tracking riêng); nosources-source-map (stack traces nhưng không expose source code). Production strategy: không serve .map files publicly (expose source code và IP); upload .map files lên Sentry/Datadog trong CI pipeline; Sentry webpack plugin/vite plugin tự động upload và delete .map files. TypeScript: "sourceMap": true trong tsconfig.json; "inlineSources": true để embed source content trong .map (không cần host original files). Vite: sourcemap: true trong vite.config.ts → explicit .map files; sourcemap: 'inline' → embed trong bundle (lớn hơn). Security: .map files chứa original source code — nếu serve publicly, users có thể đọc full source; production .map chỉ nên accessible bởi error tracking service.