یکی از سخت‌ترین کارای دنیا بالا بردن پرفورمنس اپلیکیشن هاست. بخصوص اگه اون اپلیکیشن تحت وب باشه. دلیلش اینه که پرفورمنس یک وب‌اپ شامل 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 خارج کردید را داخل مرورگر cache کنید و بازم سرعت لود اپ را افزایش بدید. خوب حالا چه محتویاتی را می‌تونیم از فایل js خارج کنیم؟ دو نمونه‌ی رایج را در زیر می‌تونید ببینید:
لازم نیست کاربر قسمت هایی از برنامه‌تون که بهش نیاز نداره را دانلود کنه. اگه به 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 بدونید می‌تونید ویدیو ارائه من در هفتمین دورهمی جامعه ری‌اکت ایران را ببینید. یا اینکه دایکیومنت رسمی وب‌پک را بخونید.
