Двустороннее руководство по Gzip «Краткая оптимизация производительности»

JavaScript
Двустороннее руководство по Gzip «Краткая оптимизация производительности»

Этот каталог статей:

1. Преимущества включения сжатия gzip

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

Его можно настроить, когда сервер отправляет данныеContent-Encoding：gzip, пользователь указывает, как данные сжимаются

После того, как клиент получает данные, он проверяет информацию соответствующего поля и может декодировать ее в соответствии с соответствующим форматом.

Когда клиент запрашивает, вы можете использоватьAccept-Encoding:gzip, пользователь указывает, какие методы сжатия принимаются.

существуетhttp／1.0Данные, отправляемые сервером в протоколе, можно настроить с помощьюContent-EncodingПоле, это поле используется для описания метода сжатия данных

Content-Encoding: gzip
Content-Encoding: compress
Content-Encoding: deflate

После получения возвращенных данных клиент проверяет информацию соответствующего поля, а затем выполняет соответствующее декодирование согласно соответствующему формату. Когда клиент запрашивает, он может использоватьAccept-EncodingПоля описывают, какие методы сжатия он принимает.

Accept-Encoding: gzip, deflate

2. Webpackизgzipнастраивать

Здесь используются следующие плагины:CompressionWebpackPlugin

const CompressionWebpackPlugin = require（'compression-webpack-plugin'）
module.exports = { 
    “plugins”：[new CompressionWebpackPlugin] 
}

Конкретная конфигурация:

const CompressionWebpackPlugin = require('compression-webpack-plugin');

webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp('\\.(js|css)$'),
      // 只处理大于xx字节 的文件，默认：0
      threshold: 10240,
      // 示例：一个1024b大小的文件，压缩后大小为768b，minRatio : 0.75
      minRatio: 0.8 // 默认: 0.8
      // 是否删除源文件，默认: false
      deleteOriginalAssets: false
    })
)

Перед включением gzip

После включения gzipgzipПосле размера от277KBтолько~91.2KB!

3. Nginxизgzipнастраивать

Открыть/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;
    # 注：99.99%的浏览器基本上都支持gzip解压了，所以可以不用设这个值,保持系统默认即可。
    gzip_http_version 1.1;    
    ...
}

gzip on|off:

  • По умолчанию:gzip off
  • включено или выключеноgzipмодуль

gzip_static on|off:

  • По умолчанию: gzip_static выключен
  • nginxМодуль обработки статических файлов
  • Этот модуль может читать предварительно сжатыеgzфайл, что уменьшает количествоgzipсжатыйCPUЛФ.
  • После включения этого модуляnginxСначала проверьте, есть ли запрос на статические файлыgzФайл в конце, если он есть, верните его напрямуюgzсодержание документа.
  • Не поддерживается для совместимостиgzipбраузер, включитьgzip_staticмодули должны сохранять как исходные статические файлы, так иgzдокумент. При этом, в случае большого количества статических файлов, это сильно увеличит место на диске. мы можем использоватьnginxРеализация функции обратного прокси сохраняет толькоgzдокумент.

gzip_types mime-type[mime-type...]:

  • По умолчанию:gzip_types text/html(файлы js/css по умолчанию не сжимаются)
  • nginxПри использовании в качестве обратного прокси-сервера включите, включите или отключите результат, возвращаемый внутренним сервером.Предпосылка сопоставления заключается в том, что внутренний сервер должен возвращать результат, содержащий"Via"изheaderголова.
  • Тип сжатия, соответствующий типу MIME для сжатия

gzip_proxied[off|expired|no-cache|no-store]...:

  • off- Отключить сжатие всех данных результатов прокси
  • no-cache- включить сжатие, еслиheaderзаголовок содержит"Cache-Control:no-cache"информация заголовка

gzip_vary on|off:

  • а такжеhttpГолова связана, добавить одинvaryЗаголовок, для прокси-серверов, некоторые браузеры поддерживают сжатие, некоторые нет, так что не тратьте неподдерживаемые и тоже сжимайте, так по желанию клиентаHTTPзаголовок, чтобы определить, требуется ли сжатие

gzip_comp_level:

  • Значение по умолчанию: 1 (рекомендуется выбрать 4~6)

  • gzipСтепень сжатия/уровень сжатия, уровень сжатия 1-9, чем выше уровень, тем больше степень сжатия и, конечно, больше время сжатия (быстрее передача, но больше потребление ЦП).

gzip_buffers:

  • По умолчанию:gzip_buffers44k/8k

  • Настраивает систему на получение нескольких единиц кэша для хранения сжатого потока результатов gzip.

  • Например, 4 4 КБ означает, что единица измерения равна 4 КБ, а память применяется в 4 раза больше единицы 4 КБ в соответствии с исходным размером данных. 4 8k означает, что единица измерения равна 8k, и память применяется в 4 раза больше, чем единица 8k в соответствии с исходным размером данных.

  • Если не задано, по умолчанию для хранения результата сжатия gzip выделяется тот же объем памяти, что и для исходных данных.

gzip_http_version:

  • По умолчанию:gzip_http_version1.1(То есть запросы для протокола HTTP/1.1 будут сжаты gzip)

  • Примечание: 99,99% браузеров в основном поддерживаютgzipОн был распакован, поэтому вам не нужно устанавливать это значение, просто оставьте системное значение по умолчанию.

После сохранения конфигурации перезапустите Nginx:

$ sudo service nginx restart

Перед включением gzip

После включения gzip

4. Как проверить gzip?

можно смотретьNetwork, но здесь я предпочитаю использоватьcurl:

Проверьте ответ на запрос для каждого ресурса с помощью curl и проверьтеContent-Encoding:

показыватьContent-Encoding:gzip, то есть конфигурация прошла успешно.

5. Разница между двусторонним Gzip и его значение

разница заключается в:

  1. WebpackСжатие сжимает файлы один раз во время сборки, а затем сохраняет эти сжатые версии на диск.

  2. nginxНекоторые пакеты могут иметь встроенное кэширование при сжатии файлов по запросу, поэтому снижение производительности происходит только один раз (или нечасто), но обычно разница в том, что это происходит при ответе на HTTP-запрос.

  3. Для сжатия в реальном времени часто бывает более эффективно, чтобы вышестоящие прокси-серверы (такие как Nginx) обрабатывали gzip и кэширование, поскольку они специально созданы для этого и не страдают от накладных расходов времени выполнения программ на стороне сервера (многие из них написаны на С) .

  4. использоватьWebpack的Преимущества,NginxКаждый раз, когда серверу требуется длительное время для сжатия перед возвратом информации, не только значительно увеличиваются накладные расходы сервера, но и запрашивающий также проявляет нетерпение. мы вWebpackПри упаковке файл с высоким уровнем сжатия напрямую генерируется и размещается на сервере как статический ресурс, в это время гораздо эффективнее будет использовать Nginx в качестве двойной гарантии.

  5. Примечание. В зависимости от бизнес-конъюнктуры проекта требуется сжатие в режиме реального времени во время запроса или создание сжатых файлов во время построения.

Отказ от ответственности

не предназначен для обученияWebpackилиNginx, я просто написал это для удовольствия.

Это означает, что письмо немного грубое, не брызгайте на меня. . .

Спросите рекомендацию инсайдера в Шэньчжэне

Хорошо, давайте закончим еще одну статью и перейдем к теме:

В настоящее время я (пока) готов уйти, я надеюсь, что старший брат и младшая сестра HR могут подтолкнуть фронтальные рабочие места в Шэньчжэне летать 996.ICU, даже если.

  • WeChat:huab119
  • Почта:454274033@qq.com

Сборник статей автора Nuggets

Нет публики

Категории