Source Map چیست و چرا باید به آن اهمیت داد؟

آبان ۹, ۱۳۹۵

برچسب‌ها,

اگر برنامه نویسی باشید که به فکر بهینه بودن خروجی کدهای جاوااسکریپت و css است حتما برایتان سوال بوده که چطور می توان وب سایتی را که تمام کدهای جاوااسکریپت آن کامباین و minify و حتی uglify شده را با حفظ پرفورمنس عیب یابی یا دیباگ کرد؟ با وضعیت فعلی دیباگ بسیار خسته کننده و عذاب آور خواهد بود اما اکنون این کار را از طریق معجزه source maps می توانید انجام دهید.

در حقیقت source map کدهای فشرده و بهینه شده ی شما را به وضعیت unbuilt مپ می کند. وقتی که شما نسخه production را build می کنید سیستم بیلد شما (مانند گالپ یا گرانت)، یک نسخه مپ را در کنار فایل های فشرده شده قرار می دهد که اطلاعات فایل های اصلی در آن قرار داده می شود. مثلا اینکه کد مورد نظر در نسخه production دقیقا در کدام آدرس و در کدام خط از آن فایل قرار گرفته است. با دیباگ کرده پروژه در مرورگر، مپ ها به شما کمک خواهند کرد که مسیر دقیق کدها را در نسخه های development فایل ها بیابید.

wallhaven-33246

اخیرا قابلیت های فراتر از combined/uncombined و یا minified/unminified به سورس مپ ها اضافه شده. مثلا اگر شما برنامه نویس انگولار ۲ یا react باشید کدهای شما در محیط توسعه و production باهم متفاوت خواهند بود، مثلا در react در محیط توسعه از ES6 برای برنامه نویسی جاوااسکریپت استفاده می شود و در انگولار ۲ از typeScript که در مرورگرها این استاندارد های جدید پشتیبانی نمی شوند و باید توسط ابزارهایی چون webpack یا Babel به نسخه قابل فهم برای مرورگرها کامپایل شوند. در این حالت دیگر کدهای parse شده در مرورگر، با کدهای محیط توسعه شما یکسان نخواهد بود و عیب یابی عملا غیرممکن می شود چون مجبورید فقط با آزمون خطا پیش بروید، در واقع این فرایند می تواند به کابوس هر شب برنامه نویسان تبدیل شود.

سورس مپ ها حتی برای  preprocessor هایی چون less یا sass هم استفاده می شوند. همانطور که می دانید این preprocessor های css هم کدهای توسعه شان با نسخه کامپایل شده آنها متفاوت است و خروجی آنها فقط بصورت css قابل خواندن در مرورگرهاست.

مرورگرهایی چون google chrome و نسخه های اصلی فایرفاکس و Developer Tools فایل های مپ را در صورتی که وجود داشته باشند بصورت خودکار تجزیه و پردازش می کنند.

نمونه استفاده از مپ

در نمونه ای که لینک آن در بالا قرار داده شده شما با راست کلیک کردن در هر جایی از کد فشرده شده و کلیک بر روی Get original location می توانید اطلاعات ذخیره شده نسبت به موقعیت کد انتخابی خود را در فایل مپ مشاهده کنید. در صورتی که کنسول مرورگر را هم باز کرده باشید می توانید آبجکت مربوطه از فایل مپ را نیز مشاهده کنید.

source-map-demo

اگر قصد استفاده از سورس مپ را در پروژه های خود دارید مطالب زیر را بصورت کامل مطالعه کنید.

منابع:

ناصر قیاسی

من ناصر هستم. به عنوان توسعه دهنده front-end در کانگورو فعالیت می کنم. عاشق طبیعت گردی و البته علاقه مند به نظرات شما.

More Posts

0 پسند

آدرس ایمیل شما منتشر نخواهد شد.