🔵 عنوان مقاله
A look into how JavaScript source maps work
🟢 خلاصه مقاله:
خلاصه‌ای از ساخت‌وکار source map در JavaScript: کدی که در مرورگر اجرا می‌شود معمولاً پس از transpile، bundle و minify با کد اصلی تفاوت دارد. source map پلی است میان این دو تا بتوانید در DevTools مثل کد اصلی breakpoint بگذارید و خطاها را بخوانید. یک source map فایل JSONی است با فیلدهایی مثل version، file، sources، names، sourcesContent و یک رشته mappings که با Base64 VLQ فشرده شده و با بخش‌های دلتایی موقعیت‌های کد تولید‌شده را به سطر/ستون‌های فایل‌های اصلی (و در صورت وجود، نام‌ها) نگاشت می‌کند. ابزارهایی مثل TypeScript و Babel نگاشت را هنگام تبدیل می‌سازند، Webpack/Rollup/esbuild آن‌ها را ترکیب می‌کنند و Terser در مرحله minify این زنجیره را حفظ می‌کند؛ این همان chain شدن source map است. مرورگر از طریق دستور sourceMappingURL (فایل خارجی یا data URI) map را می‌خواند و با رعایت CORS آن را decode کرده و در DevTools نمایش و دیباگ را بر اساس کد اصلی ممکن می‌سازد؛ همچنین پلتفرم‌هایی مثل Sentry با دریافت map می‌توانند stack traceهای production را de-minify کنند. در عمل، به خاطر اندازه و حریم خصوصی، بهتر است در production از الگوهایی چون hidden-source-map یا nosources-source-map، میزبانی امن، و فشرده‌سازی/کش استفاده کنید. محدودیت‌ها شامل دقت ستونی ناقص در برخی تبدیل‌ها، کدهای dynamic/eval، ناسازگاری مسیرها و سوگیری‌های نگاشت است. بهترین رویه‌ها: فعال‌سازی map در تمام مراحل build، اعتبارسنجی در DevTools، اطمینان از CORS مناسب برای ابزار خطا، کنترل نسخه ابزارها و آزمون remap شدن خطاها در CI.
#JavaScript #SourceMaps #WebDev #Debugging #DevTools #Bundlers #Performance
🟣لینک مقاله:
https://golangweekly.com/link/176649/web
➖➖➖➖➖➖➖➖
👑 @gopher_academy
A look into how JavaScript source maps work
🟢 خلاصه مقاله:
خلاصه‌ای از ساخت‌وکار source map در JavaScript: کدی که در مرورگر اجرا می‌شود معمولاً پس از transpile، bundle و minify با کد اصلی تفاوت دارد. source map پلی است میان این دو تا بتوانید در DevTools مثل کد اصلی breakpoint بگذارید و خطاها را بخوانید. یک source map فایل JSONی است با فیلدهایی مثل version، file، sources، names، sourcesContent و یک رشته mappings که با Base64 VLQ فشرده شده و با بخش‌های دلتایی موقعیت‌های کد تولید‌شده را به سطر/ستون‌های فایل‌های اصلی (و در صورت وجود، نام‌ها) نگاشت می‌کند. ابزارهایی مثل TypeScript و Babel نگاشت را هنگام تبدیل می‌سازند، Webpack/Rollup/esbuild آن‌ها را ترکیب می‌کنند و Terser در مرحله minify این زنجیره را حفظ می‌کند؛ این همان chain شدن source map است. مرورگر از طریق دستور sourceMappingURL (فایل خارجی یا data URI) map را می‌خواند و با رعایت CORS آن را decode کرده و در DevTools نمایش و دیباگ را بر اساس کد اصلی ممکن می‌سازد؛ همچنین پلتفرم‌هایی مثل Sentry با دریافت map می‌توانند stack traceهای production را de-minify کنند. در عمل، به خاطر اندازه و حریم خصوصی، بهتر است در production از الگوهایی چون hidden-source-map یا nosources-source-map، میزبانی امن، و فشرده‌سازی/کش استفاده کنید. محدودیت‌ها شامل دقت ستونی ناقص در برخی تبدیل‌ها، کدهای dynamic/eval، ناسازگاری مسیرها و سوگیری‌های نگاشت است. بهترین رویه‌ها: فعال‌سازی map در تمام مراحل build، اعتبارسنجی در DevTools، اطمینان از CORS مناسب برای ابزار خطا، کنترل نسخه ابزارها و آزمون remap شدن خطاها در CI.
#JavaScript #SourceMaps #WebDev #Debugging #DevTools #Bundlers #Performance
🟣لینک مقاله:
https://golangweekly.com/link/176649/web
➖➖➖➖➖➖➖➖
👑 @gopher_academy
Do more with less. | Polar Signals
The Inner Workings of JavaScript Source Maps
A deep dive into how JavaScript source maps work under the hood, with examples showing how all the pieces fit together.
👍1