فعال‌سازی Gzip و Browser Caching در React


Gzip یک الگوریتم فشرده‌سازی است که اندازه فایل‌های ارسالی از سرور به مرورگر را کاهش می‌دهد و زمان بارگذاری صفحات را بهبود می‌بخشد. Browser caching نیز در React به فرآیند ذخیره‌سازی منابع وب (مانند فایل‌های HTML، CSS، JavaScript) در مرورگر کاربران اشاره دارد تا بارگذاری مجدد صفحات سریع‌تر و مصرف پهنای باند کاهش یابد.

برای فعال‌سازی قابلیت gzip و Browser Caching کافیست که فایلی به‌نام liara_nginx.conf در ریشه‌ی برنامه‌ی‌تان، در کنار package.json، ایجاد کنید و قطعه کد زیر را در آن، قرار دهید:

کپی
gzip             on;
gzip_disable     "msie6";
gzip_vary        on;
gzip_proxied     any;
gzip_comp_level  6;
gzip_types       text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml;

location / {
  index index.html index.htm;
  try_files $uri $uri/ /index.html =404;
}

location ~ /\.well-known {
  allow all;
}

# cache.appcache, your document html and data
location ~* \.(?:manifest|appcache|html?|xml|json)$ {
  expires -1;
}

# Media: images, icons, video, audio, HTC
location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
  expires 1M;
  access_log off;
  add_header Cache-Control "public";
}

# CSS, Javascript and Fonts
location ~* \.(?:css|js|otf|ttf|eot|woff|woff2)$ {
  expires 1y;
  access_log off;
  add_header Cache-Control "public";
}

در نهایت کافیست تا برنامه خود را مجدداً در لیارا، مستقر کنید تا تغییرات بر روی برنامه، اعمال شوند.