Если вы создаете веб-приложение, которое использует сборщик веб-пакетов, оптимизация сжатия сайта настолько проста, 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
- один большой шаг к ее улучшению.