Build ToolsKhô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.
Never serve .map files publicly in production — upload to Sentry/Datadog in CI to get readable stack traces without exposing source code; hidden-source-map is the standard strategy for production bundles.
Source maps map compiled/minified code back to the original source — when an error occurs in a production bundle, the stack trace shows the file/line in TypeScript source instead of minified gibberish. Format: a .map JSON file containing mappings from generated code → source; referenced in the bundle via //# sourceMappingURL=bundle.js.map. Types in Webpack/Vite: eval-source-map (dev, fast rebuild, in-bundle); source-map (production, external .map file, full quality); hidden-source-map (no URL in the bundle, upload .map file to error tracking separately); nosources-source-map (stack traces but no source code exposure). Production strategy: don't serve .map files publicly (exposes source code and IP); upload .map files to Sentry/Datadog in the CI pipeline; Sentry webpack/vite plugins auto-upload and delete .map files. TypeScript: "sourceMap": true in tsconfig.json; "inlineSources": true embeds source content in the .map (no need to host original files). Vite: sourcemap: true in vite.config.ts → explicit .map files; sourcemap: 'inline' → embedded in bundle (larger). Security: .map files contain the original source code — if served publicly, users can read the full source; production .map files should only be accessible to the error tracking service.