Gzipping React: Boosting Performance with Compression

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

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

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

اما Gzip چیه؟

احتمالا با دیدن zip توی اسمش یاد مفاهیمی مثل فشرده سازی افتادید. بله، Gzip یکی از روش‌های فشرده سازی فایل هست که به شدت پر استفاده در سیستم عامل‌های Unix Based هست.

Gzip و React

قبل از هر چیز، باید بدونیم که Gzip در عمل سایز باندل اپلیکیشن شما رو کم نمیکنه، بلکه با فشرده کردنش باعث میشه حجم فایلی که کاربر دانلود میکنه به حد خوبی کم بشه، به این شکل که باندل اصلی توسط سرور Gzip میشه و تو browser کاربر از حالت فشرده خارج میشه. از اونجایی که این عملیات توسط سرور انجام میشه، فعال و تنظیم کردنش هم توی سرور انجام میشه و نیازی به تغییر خاصی تو کد اپلیکیشن نیست. استفاده از Gzip مزایا و معایبی داره که برخی از اون‌ها عبارت‌اند از:

مزایا:
- کاهش سایز دانلود
- پوشش بالای browser: تمام browser های بروز فعلی Gzip رو پشتیبانی میکنن و عملا میتونیم نگرانی‌ای نسبت به عدم پشتیبانی نداشته باشیم.

- امکان غیرفعالسازی در صورت عدم پشتیبانی: با این که احتمال عدم پشتیبانی خیلی پایینه، اما میشه در حالتی که پشتیبانی وجود نداشته باشه به صورت اتوماتیک باندل غیر فشرده رو جایگزین باند Gzip شده کرد.
- امکان تعیین میزان فشرده سازی: Gzip این اجازه رو به ما میده تا سطح فشرده سازی رو مشخص کنیم

معایب:
- افزایش فشار به سرور و browser: از اونجایی که فشرده و غیرفشرده‌سازی توسط سرور و browser انجام میشه، در صورت استفاده از Gzip نیاز به سخت‌افزار بیشتر خواهدبود.
- پیچیدگی پیاده‌سازی در برخی از محیط‌ها

شاید براتون سوال شده باشه که استفاده از Gzip چقدر تاثیر داره، بریم ببینیم!

احتمالا در انتهای فرایند build اپلیکیشنتون تا الان لاگی مشابه این لاگ دیدید:

همونطور که از خط اول پیداست، بیلدر به شما اطلاع میده که در صورتی که از Gzip استفاده کنید، حجم باندل و chunk هاتون چه مقدار خواهد بود. پس اگه میخواید ببینید که ارزشش رو داره یا نه، دفعه بعدی که build انجام دادید، به این اعداد توجه بیشتری بکنید! برای مثال لاگی که توی این عکس می‌بینید مربوط به اپلیکیشنی بوده که حجم فایل main اون ۱.۹ مگابایت بوده!‌ یعنی فشرده سازی از ۱.۹ مگابایت به ۴۳۸ کیلوبایت که واقعا خفنه!

چطوری از Gzip استفاده کنیم؟

هدف اصلی این مقاله این بود که با Gzip و مفهومش آشنا شیم، منابع متعددی برای آموزش پیاده‌سازی Gzip در محیط‌های مختلف وجود داره و میتونید برای پیاده‌سازی تو محیط مدنظرتون ازشون استفاده کنید. توی این مقاله صرفا برای آشنایی با برخی از تنظیمات Gzip به تنظیم Gzip در nginx میپردازیم:

برای پیاده‌سازی Gzip Compression در nginx میتونید تنظیمات زیر رو توی بلوک server از کانفیگ nginx پروژتون قرار بدید:

gzip on;
gzip_disable &quotmsie6"
gzip_vary on;
gzip_comp_level 6;
gzip_min_length 0;
gzip_types text/plain application/javascript text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype;

از اونجایی که ممکنه راست چینی متن بهم بریزه، به شکل زیر تک به تک دستورها رو بررسی میکنیم:
خط اول: این دستور همونطور که مشخصه، Gzip Compression رو فعال میکنه. اما فقط برای محتواهای html.
خط دوم: غیرفعالسازی Gzip در مرورگرهایی که پشتیبانی ندارن
خط سوم: در صورتی که browser درخواست دهنده به هر دلیل درخواست دریافت محتوای غیرفشرده داشته باشه، این دستور این اجازه رو میده که محتوای غیر فشرده برای اون browser ارسال بشه.
خط چهارم: میزان فشرده‌سازی، که در nginx مقدار اولیش ۶ هست.
خط پنجم: مشخص کردن حداقل حجم فایل‌هایی که Gzip باید روی اون‌ها انجام بشه.برای مثال اگه شما این مقدار رو ۱۰۰۰ تنظیم بکنید، فایل‌هایی که حجمی کمتر از ۱۰۰۰ داشته باشن فشرده نخواهندشد.
خط ششم: مشخص کردن فایل‌هایی که باید فشرده بشن، برای مثال شما حتی میتونید عکس‌هاتون رو هم توی این فرمت‌ها قرار بدید، اما در نظر داشته باشید که هر چقدر که فایل‌های بیشتری رو فشرده کنید فشاری که به سرور برای فشرده‌سازی خواهداومد بیشتر خواهدبود. پس بهتره برای فایل‌هایی مثل فایل‌‌های تصویری، حین توسعه اون‌ها رو بهینه کنید تا نیازی به فشرده‌سازی نداشته باشن.

استفاده از ‌Gzip در حال حاضر خیلی متداوله و همونطور که دیدید تنظیم کردنش کار خیلی پیچیده و زمان‌بری نیست، همچنین تصمیم برای استفاده کردن یا نکردن از Gzip تصمیم بزرگ و وحشتناکی نیست اما قبل از استفاده ازش حتما وجود نیاز و مزایا و معایبش رو به خوبی بررسی کنید.