Я новичок в веб-разработке, и мне очень полезно реализовать это в производственной сборке для повышения производительности. А здесь я постараюсь поделиться этим и, надеюсь, это будет полезно и для вас!

Обратите внимание, что если вы используете сеть доставки контента (CDN), такую ​​как Cloudflare или Amazon Cloudfront, эта функция уже предусмотрена. Так что вам не придется обрабатывать это вручную.

Пример проекта, который я использую для демонстрации этой цели, использовал несколько технических стеков, а именно:

  1. React JS как интерфейсная библиотека
  2. AWS S3 как услуга веб-хостинга
  3. gzipper, пакет узлов для сжатия ваших статических файлов.
  4. и т. д. (другие стеки, не относящиеся к этой цели)

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