کلید موفقیت در بالا بردن پرفورمنس اپ‌های تحت وب

یکی از سخت‌ترین کارای دنیا بالا بردن پرفورمنس اپلیکیشن هاست. بخصوص اگه اون اپلیکیشن تحت وب باشه. دلیلش اینه که پرفورمنس یک وب‌اپ شامل 3 قسمت میشه: 1- پرفورمنس بارگذاری 2- پرفورمنس رندرینگ 3- پرفورمنس زمان اجرا.

دو مورد اول برای سئو بشدت مهمه ولی مورد آخر فقط برای کاربرانتان مهمه چون موتور های جستجوگر نمی‌تونن به درستی مورد آخر را بسنجن. ولی حتی اگه سئو برای وب‌اپ شما اهمیتی نداره، سعی کنید هر سه مورد را رعایت کنید چون هر سه مورد بالا به بهبود UX وب‌اپ شما کمک می‌کنه.

پرفورمنس زمان اجرا به اون الگوریتم هایی که استفاده می‌کنید بستگی داره و اگه یکم الگوریتم بدونید و تجربه‌ی برنامه نویسی داشته باشید، معمولا به مشکل بر ‌نمی‌خورید. ولی مشکل اصلی دو مورد اوله، همون دو مورد که روی هم سئو تاثیر داره.

اگه بخواییم تو زمینه‌ی پرفورمنس کمال گرا باشیم احتمالا یا نامید می‌شیم یا دیوونه! چون اگه 10 سال هم بخوایید صرفا روی پرفورمنس کار کنید هنوز جای کار هست. هم مقالات و نکات بسیار زیادی تو این زمینه وجود داره و هم پیاده سازی همشون با هم خیلی کار سخت و پیچیده‌ایه.

راه حل چیه؟ خیلی ساده‌س: قانون 20 80

با انجام دادن 20 درصد کارا 80 درصد پرفورمنس وب‌اپتون را بهبود ببخشید. اون 20 درصد چیه؟

کاهش سایز باندل های جاوااسکریپت

بله اون 20 درصد "کاهش حجم فایل‌های JS" است. چرا اینقدر سایز فایل های JS مهم و تاثیر گذاره؟ چون فایل های JS با بقیه فایل‌ها فرق داره و چند جانبه می‌تونه پرفورمنس اپلیکشین شما را تحت تاثیر قرار بده.

بزارید یه فایل جاوااسکریپت 170 کیلوبایتی را با یه فایل تصویر 170 کیلوبایتی مقایسه کنیم:

همون جوری که تو تصویر بالا می‌بینید 170 کیلوبایت فایل JS حدود 6.4 ثانیه طول می‌کشه تا اجرا بشه ولی فایل JPG حدود 3.4 ثانیه. چون فایل JS اول باید decompress شه و بعد parse بشه و بعد compile بشه و در آخر execute بشه. و این خیلی برای مرورگر هزینه داره.

یه چندتا نکته هست که اگه رعایت کنید تا حد خوبی می‌تونید سایز باندل JS را کم کنید.

محتویات فایل JS را به غیر فایل JS تبدیل کنید

با این کار از دو جنبه سود می‌برید یکی اینکه سایز باندل JS کم می‌شه و طبق تصویر بالا پرفورمنس افزایش پیدا می‌کنه و دوم اینکه می‌تونید اون فایل‌هایی که از محتویات JS خارج کردید را داخل مرورگر cache کنید و بازم سرعت لود اپ را افزایش بدید. خوب حالا چه محتویاتی را می‌تونیم از فایل js خارج کنیم؟ دو نمونه‌ی رایج را در زیر می‌تونید ببینید:

• یکی از کارایی که معمولا فرانت‌اند دولوپرها انجام می‌ن اینه که فایل های SVG را به کامپوننت های جاوااسکریپتی تبدیل می‌کنن که خیلی راحت بتونن property های اونو با css تغییر بدن و راحت بتونن رنگش را با css عوض کنن. اکثر مواقع ما نیاز به این کار نداریم و می‌تونیم از همون فایل SVG استفاده کنیم و property های اونو به صورت static تعریف کنیم. اینجوری حجم باندل js ما بشدت کاهش پیدا می‌کنه.
• یکی از trend های این روزای فرانت‌اند CSS-in-JS است. چیزی که DX یا developer experience خوبی داره ولی UX خیلی بدی ارائه میده. یعنی خودتو راحت می‌کنی و کاربر را ناراحت. چرا؟ چون اولا تمام CSSها تبدیل به JS می‌شن که خوب طبق حرفایی که بالا زدم خیلی بده و دوم اینکه css‌ها هنگام run-time بر اساس state های موجود ساخته می‌شن که باعث کندی اپ در زمان اجرا میشه. البته چند مورد CSS-in-JS استثنا داریم که css‌ها را از JS اکستراکت کرده و در فایل CSS جدا ذخیره می‌کنن که معروف ترین اون linaria است که توسط یکی از نوابغ دنیای Front-End به نام Satyajit Sahoo خلق شده. علاوه بر linaria برای حل این مشکل می‌تونید از همون روش سنتی css/sass/less/scss استفاده کنید.
• و...

تکنیک Code Splitting

لازم نیست کاربر قسمت هایی از برنامه‌تون که بهش نیاز نداره را دانلود کنه. اگه به componentای نیاز داشت js اونو لود کنید. مثلا اگه کاربر خواست login کنه و component لوگین شما به صورت یه modal است، هر زمان به اون نیاز داشت اونو براش دانلود کنید.

ممکنه براتون سوال پیش که اگه تعداد bundleها زیاد بشه، تعداد request‌ها برای دانلود تمامی bundle‌ها افزایش پیدا می‌کنه و این می‌تونه به سرعت لود سایت صدمه بزنه. این نگرانی زمانی درسته که شما از http1 یا http1.1 استفاده می‌کنید ولی اگه از http2 استفاده می‌کنید اصلا نباید نگرانش باشید و توصیه می‌شه که حتما از http2 استفاده کنید. یه اصطلاحی داریم به نام Aggressive Code Splitting که میگه خیلی بیرحمانه bundle ها را به قسمت های کوچکتری تقسیم کن. حتی یه پلاگین وب‌پک هم به نام AggressiveSplittingPlugin وجود داره که این کار را برای ما براحتی انجام میده.

یه پترن خوب به نام Progressive Bootstrapping برای code splitting وجود داره که ایده‌‌ش مال آقای Paul Lewis هست که در قالب این توئیت توضیح دادن که توصیه می‌کنم حتما بخونیدش. اگه دوست داشتید بیشتر راجب code splitting بدونید می‌تونید ویدیو ارائه من در هفتمین دورهمی جامعه ری‌اکت ایران را ببینید. یا اینکه دایکیومنت رسمی وب‌پک را بخونید.