Если вы создаете веб-приложение, которое использует сборщик веб-пакетов, оптимизация сжатия сайта настолько проста, gzip - эффективный способ сэкономить полосу пропускания и ускорить работу вашего сайта.

Проверьте текущий размер пакета вашего приложения и просмотрите. Например, я сравнил простое приложение с до и после сжатия.

После сжатия размер приложения с 277 КБ до ~ 91,2 КБ! 🤔

Вместо создания bundle.js сгенерируйте bundle.js.gz с помощью плагина сжатия Webpack.

const CompressionPlugin = require('compression-webpack-plugin')
module.exports = {
    "plugins": [ new CompressionPlugin ]
}

После включения сборки приложения будут созданы два файла с bundle.js и bundle.js.gz. Сохраните два файла и скопируйте все связанное приложение в корневую папку nginx var/etc/www

Но nginx не выбирает сжатый файл, по умолчанию он будет обслуживать несжатые файлы js. Чтобы включить сжатие, включите директиву gzip с параметром on.

Настройка параметров gzip в Nginx 👋

Откройте /etc/nginx/conf.d и укажите конфигурацию ниже.

server {
    gzip on;
    gzip_static on;    
    gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
    gzip_proxied  any;
    gzip_vary on;
    gzip_comp_level 6;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;    
    ...
}

Чтобы отправить клиенту сжатую версию файла вместо обычной, установите для директивы gzip_static значение on в соответствующем контексте.

В этом случае для обслуживания запроса на /path/to/bundle.js NGINX пытается найти и отправить файл /path/to/bundle.js.gz. . Если файл не существует или клиент не поддерживает gzip, NGINX отправляет несжатую версию файла.

Обратите внимание, что директива gzip_static не включает сжатие на лету. Он просто использует файл, предварительно сжатый любым инструментом сжатия. Для сжатия содержимого (а не только статического содержимого) во время выполнения используйте директиву gzip.

Сохраните и закройте файл для выхода.

Чтобы включить новую конфигурацию, перезапустите Nginx.

$sudo service nginx restart

Как проверить степень сжатия

Мы можем проверить это так же, как и выше, проверяя на вкладке «Сеть», используя curl в каждом из тестовых файлов и проверяя вывод для заголовка Content-Encoding: gzip.

Теперь весь пакет должен оставаться несжатым. вы должны найти заголовок Content-Encoding: gzip в выводе.

Если это так, вы успешно настроили gzip сжатие в Nginx! 👏👏👏

Заключение

Изменить конфигурацию Nginx для полного использования gzip сжатия легко, но преимущества могут быть огромными. Пользователи с ограниченной пропускной способностью также быстрее получают доступ к сайту. Скорость набирает обороты как важная часть современного Интернета, и использование gzip - один большой шаг к ее улучшению.