سلام به همه دوستان. بعد از سالها دوری از محیط ویرگول، تصمیم گرفتم از این رسانه جهت انتشار سری جدیدی از مطالبم استفاده کنم. من محمد صالح فدائی، توسعه دهنده فرانتاند هستم که البته تجربه کار با پلتفرمها، زبانهای مختلف برنامه نویسی و انواع و اقسام ابزارهای تخصصی (به خصوص در حوزه طراحی رابط کاربری) رو دارم؛ اما در نهایت فرانتاند رو به عنوان تخصص نهایی خودم از بین تجربیات متفاوتم انتخاب کردم. در این سری از مطالب در نظر دارم به مباحث کارایی (Performance) در فرانتاند بپردازم. اگر این مباحث براتون جذابه مطالب من رو دنبال کنید و هر هفته منتظر یک پست جدید در این زمینه باشید.
مدت زمان زیادی نیست که مسائل مربوط به کارایی در فرانتاند به شدت نُقل محافل شده است. دلیل این امر هم واضح است: افزایش پیچیدگی در این حوزه بر روی تجربه کاربری (UX) کاربران تاثیر گذاشته بود و وبسایتهای پیشرفته هر روز کندتر و سنگینتر از دیروز ظاهر میشدند. خلاصه داستان هم این شد که گوگل به عنوان پیشرو در این زمینه با صرف بودجههای هنگفت به طرق مختلف (ساخت ابزار، ایجاد محدودیتها، حمایتهای مالی و...) به توسعهدهندگان یادآوری کرد که محصولاتشان از طریق اینترنت به دست کاربر نهایی میرسد و کاربران تقریبا از طریق هر پلتفرم و سیستم عاملی توانایی دسترسی به این محصولات را دارند پس بیشتر باید مراقب مباحث مربوط به کارایی و اجرا شدن بهینه، سریع و درست محصول خود باشند.
در این سری از مطالب بهبود کارایی در فرانتاند قرار است مسائل مختلف (و البته مرتبط) به مباحث کارایی را به صورت ریز (و شاید طولانی) بررسی کنیم و راه حلهایی را برای حل این مسائل ارائه دهیم. در این سری از پستها بعد از شرح کوتاهی از مسئله، دو عنوان چرا و چگونه؟ داریم که در آنها به چرایی اهمیت این مسئله و چونگی حل آن میپردازیم. پس با این سری از مطالب همراه ما باشید.
تمامی کدهای HTML موجود در خروجی نهایی (Production) باید خلاصه سازی شده و کامنتها، فضاهای خالی و خطوط اضافی حذف شوند.
قبل از آنکه به جزئیات بیشتری بپردازیم لازم است تا توضیحی کوتاه برای آن دسته از افرادی (که احیانا) نمیدانند خلاصه سازی چیست ارائه دهیم:
خلاصهسازی کد منبع (به انگلیسی: Minification یا Minify) در زبانهای برنامهنویسی اشاره به رفع بایتهای غیرضروری مانند فضاهای خالی و فاصلهها از کدهای منابع دارد. خلاصه سازی کد منبع مخصوصاً برای زبانهای تفسیرشده مانند جاوا اسکریپت بسیار کاربردی است، زیرا باعث کاهش حجم فایلها و افزایش سرعت تحویل داده به کاربران در اینترنت میشود. [منبع]
در خلاصهسازی هر چیز اضافی (مانند کامنتها، فضاهای خالی اضافه یا extra spaces و...) در خروجی نهایی حذف شده و در مجموع کدها خلاصهتر به دست کاربر نهایی میرسند. این عملیات باعث بالا رفتن کارایی در زمان بازدید کاربر از وبسایت مورد نظر میشود. اگر مایلید که جزئیات بیشتری بدانید که چرا این عملیات کارایی را بالا میبرد با ما همراه باشید.
کدهای منبع و خروجی نهایی
در بسیاری از زبانهای برنامه نویسی کدهای منبع با خروجی نهایی متفاوت هستند. خروجی نهایی در طی عملیات Compile از روی کدهای منبع ایجاد میشود. اما در جاوا اسکریپت این عملیات وجود ندارد و شما به راحتی میتوانید کدها را به همان صورتی که نوشتید در مرورگر به اجرا درآورید. در واقع عملیات Compile توسط مرورگر کاربر و بعد از دانلود کدها انجام میشود و برنامه نویس فرانتاند نیازی به تولید کدهای Compile شده ندارد.
حال تصور کنید که میخواهید کدهای HTML را خلاصه سازی کنید. طی این فرایند کدهای HTML شما در بیشترین حالت ممکن خلاصه سازی شده و خروجی نهایی برای توسعه دهنده (و هر کاربر دیگر) خوانایی بسیار پایینی خواهد داشت و به همین واسطه قابلیت توسعه ندارند. اگر هم بخواهید بعد از هر ویرایش کدها را یک دور خلاصه سازی کنید و سپس آنها را بر روی سرور قرار دهید و دوباره از روی کدهای خلاصه سازی شده (و با مرتب کردن آنها با ابزارهای مرتب سازی) توسعه و ویرایش بعدی را انجام دهید که قطعا دارید وقت خود را تلف میکنید. به همین دلیل است که نیاز دارید در جاوا اسکریپت نیز کدهای منبع خود را از خروجی نهایی جدا کنید تا بتوانید به راحتی کدهای خود را (از طریق کدهای منبع) توسعه دهید و در نهایت خروجی نهایی را نیز در بهترین حالت ممکن به دست کاربر برسانید. اما حواستان باشد که خروجی نهایی در اینجا به معنی compile نیست و خروجی نهایی شما فقط با اعمال یکسری بهینه سازیها همان کدهای معمول HTML، CCS و JS هستند.
خلاصه سازی باعث کاهش حجم میشود
شما توسعه دهنده کدهایی هستید که از طریق اینترنت به دست کاربر میرسد. در نتیجه حجم کدها اولین (و البته ساده ترین) متغیری است که باید در مباحث کارایی در نظر بگیرید. کاربران اینترنت با دستگاههای مختلفی (از ارزانترین و کندترین تا گرانترین و سریعترین) به این شبکه متصل میشوند و اکثرا سرعت اینترنت محدودی دارند. خلاصه سازی باعث میشود که مرورگر کاربر حجم کمتری را دانلود کرده و در نتیجه صفحه وبسایت مورد نظر را سریعتر ببیند. اینجا دقیقا همان نقطهای است که کارایی (Performance) نمایان میشود. هر چقدر حجم کدهایی که به دست کاربر میرسد کمتر باشد کارایی وبسایت شما افزایش مییابد.
تاثیر خلاصه سازی در زمان بارگذاری صفحه
با تعاریف بالا، ممکن است هنوز قانع نشده باشید که واقعا چرا باید کدهای HTML را خلاصهسازی کنید و یا این خلاصهسازی در نهایت چه تاثیری بر روی تجربه نهایی کاربر دارد.به همین دلیل قرار است به شما نشان دهیم که در دنیای واقعی تفاوت حجم کدهای HTML خلاصه سازی شده و مرتب (مناسب برای زمان توسعه) چقدر است؟ برای نشان دادن این تفاوت ما از کدهای HTML سایتهای دیجی کالا، دیوار، ویرگول، آچاره و آپارات استفاده میکنیم:
همانطور که میبینید، کدهای HTML خلاصه سازی شده از نظر حجمی به طور متوسط 42% کوچکتر از کدهای مرتب هستند و این یعنی در نسخه خلاصه سازی شده، کدهای HTML حدود 42% سریعتر توسط مرورگر کاربر دانلود میشوند. پس حتما در خروجی نهایی، کدهای HTML را خلاصه کنید.
اولین محتوایی که توسط مرورگر دانلود میشود
زمانی که مرورگر به سرور برای بارگذاری یک صفحه (یا بهتر است بگوییم یک مسیر) درخواست میدهد، کدهای HTML اولین محتوایی است که به عنوان پاسخ دریافت میشود. البته مدت زمانی که کاربر برای بارگذاری یک صفحه درخواست میدهد تا مشاهده آن صفحه، به پارامترهای مختلفی وابسته است و حجم کدهای HTML و مدت زمانی که طول میکشد این کدها دانلود شوند یکی از این پارامترهاست. در نتیجه هر چه این کدها حجم کمتری داشته باشند نمایش اولیه وبسایت سریعتر اتفاق میافتد و این یعنی FCP پایین تر.
ابزارهای زیادی برای خلاصهسازی کدهای HTML وجود دارند. اگر میخواهید به طور دستی و ابزارهای آنلاین (که توصیه نمیشود اما شاید گاهی مجبور به انجام باشید)، سایتهای Minify Code و Refresh-SF استفاده کنید. اگر قصد دارید در VSCode و از طریق پلاگینها این عملیات را انجام دهید، میتوانید به سراغ پلاگین Minify بروید.
برای آن دسته از توسعهدهندگانی که از ابزارهای ساخت مانند Webpack و Rollup و... استفاده میکنند نیز دهها پلاگین و پکیج برای انجام این عملیات وجود دارد که میتوانند از آنها در ابزارهای ساخت مورد نظر خود بهره بگیرند. برای نمونه این پلاگین برای انجام فراینده خلاصه سازی کدهای HTML در Webpack توسعه داده شده است.
در این پست سعی کردیم به صورت جزئی به مسئلهای ساده اما کاربردی در بحث کارایی بپردازیم. در پستهای آتی نیز به سراغ مباحث مشابه خواهیم رفت که رفته رفته پیشرفتهتر میشوند اما تمام سعی من بر این است که این مباحث را ساده و قابل درک بیان کنم. اگر دوست دارید پست بعدی از سری پستهای موضوع بهبود کارایی در فرانتاند را بخوانید، بر روی لینک زیر کلیک کنید:
لطفا اگر نکته نظر یا پیشنهادی دارید از طریق نظرات با من در ارتباط باشید.
