Я новичок в веб-разработке, и мне очень полезно реализовать это в производственной сборке для повышения производительности. А здесь я постараюсь поделиться этим и, надеюсь, это будет полезно и для вас!
Обратите внимание, что если вы используете сеть доставки контента (CDN), такую как Cloudflare или Amazon Cloudfront, эта функция уже предусмотрена. Так что вам не придется обрабатывать это вручную.
Пример проекта, который я использую для демонстрации этой цели, использовал несколько технических стеков, а именно:
- React JS как интерфейсная библиотека
- AWS S3 как услуга веб-хостинга
- gzipper, пакет узлов для сжатия ваших статических файлов.
- и т. д. (другие стеки, не относящиеся к этой цели)
Прежде всего, вам нужно знать, на каком уровне производительность вашего приложения. Для этого я использую Lighthouse Audits в DevTools Chrome. Просто откройте DevTools (щелкните правой кнопкой мыши = ›проверить), затем откройте вкладку« Аудиты »и нажмите кнопку« Выполнить аудит ». Вот как выглядит производительность моих примеров приложений:
Это было довольно плохо, набрал 8/100 и потерял 7,24 секунды (по оценкам). Поэтому я попытался провести небольшое исследование сжатия статических файлов (текста). А потом я узнал, что почти все браузеры поддерживают прием статических файлов в сжатом формате, таких как gzip, brotli и deflate. Я выбираю gzip, потому что, согласно моим исследованиям, все современные браузеры поддерживают этот формат.
Сжатие статических файлов в GZIP вручную
Итак, теперь часть «как» выполнять сжатие вручную. Сначала вы можете установить любой пакет для сжатия файлов. Я использую gzipper. Чтобы установить его, введите это в корневой каталог вашего проекта в терминале:
$ npm установить gzipper
or
$ пряжа добавить застежку-молнию
если вы используете пряжу.
Следующим шагом является настройка команды сборки таким образом, чтобы каждый раз при создании статических файлов gzipper сжимал их в формат gzip. Поскольку я использую react и ubuntu, вот как мои сценарии сборки выглядят в package.json:
«Скрипты»: {
build »:« react-scripts build && gzipper - verbose ./build ./dist - output-file- format [filename]. [ext] »,
}
Эта команда здесь означает, что после того, как вы создадите свой сценарий реакции, он сжимает все файлы в каталоге ./build и сохраняет выходные файлы в ./dist. Поэтому, когда я развертываю приложение, я буду развертывать файлы из ./dist, которые уже сжаты, а не из ./build.
После этого вы должны настроить хостинг-сервер, чтобы убедиться, что он вернет HTTP-ответ, который включает «content-encoding: gzip», если вы используете сжатие gzip, или br для brotli, и deflate для deflate. Вы можете проверить, правильно ли оно работает, проверив развернутое приложение, зайдя на вкладку сети в DevTools и выбрав любые статические файлы, запрошенные браузером. Если все работает правильно, вы увидите что-то вроде этого:
Я упоминал, что не все браузеры поддерживают все форматы сжатия. Вы можете проверить, какой тип сжатия поддерживает браузер, проверив заголовок HTTP-запроса на вкладке сети DevTools.
Когда все работает хорошо, вы можете снова запустить Lighthouse Audits, чтобы увидеть эффект. В моем случае он работает очень хорошо, и уровень производительности подскочил с 8 до 71. В конце концов, это сжатие действительно помогает производительности моего проекта.
С сетью доставки контента (Cloudflare)
Если вы используете сеть доставки контента, такую как Cloudflare или Amazon Cloudfront, вы можете использовать их функциональные возможности для сжатия файлов. Например, в моем проекте преобразование единиц я использую Cloudflare, и в настройках проекта в параметре speed = ›optimisation вы можете найти вариант, при котором вы можете выбрать, применять или нет сжатие brotli.
С CDN все так просто, не правда ли?
Заключение
Использование сжатия статических файлов иногда действительно помогает повысить производительность вашего веб-сайта. В моем случае это действительно помогает мне повысить производительность моего приложения с 8/100 до 71/100. Для этого вы можете вручную выполнить сжатие, развернуть его и настроить сервер на выдачу ответа «кодирование содержимого» или вы можете просто сделать все это, используя поставщика сети доставки контента, например cloudflare, чтобы все упростить.