Зачем открывать gZip
Когда мы отправляем кому-то электронное письмо, мы сжимаем наши собственные файлы перед отправкой, а получатель получает файлы, а затем распаковывает их, чтобы получить файлы. Эта операция стала для нас обыденной. Цель нашего сжатого файла — уменьшить размер передаваемого файла и увеличить скорость передачи. мы вhttpоткрыть во время передачиgZipЦель та же, но общая статья вводитgZipВсегда комбинируйте некоторую конфигурацию на стороне сервера (nginx) или плагин инструментов сборки (webpack), перечисление множества конфигураций настолько запутанно, что я в итоге ничего не понял.为什么用,怎么用эти вопросы.
http и gzip
Давайте обсудим эти вопросы ниже
gZipкак файлы взаимодействуют
Когда мы передаем сжатые файлы другим, мы обычно используем суффикс имени.rar, .zipПолучив файл, другая сторона выбирает различные методы распаковки в соответствии с соответствующим именем суффикса, а затем распаковывает файл. мы вhttpРолевой игрок распакованного файла во время передачи — это браузер, который мы используем, но как браузер различает формат файла и какой формат следует использовать для его распаковки?
существуетhttp／1.0Данные, отправляемые сервером в протоколе, можно настроить с помощьюContent-EncodingПоле, это поле используется для описания метода сжатия данных
Content-Encoding: gzip
Content-Encoding: compress
Content-Encoding: deflateПосле получения возвращенных данных клиент проверяет информацию соответствующего поля, а затем выполняет соответствующее декодирование согласно соответствующему формату. Когда клиент запрашивает, он может использоватьAccept-EncodingПоля описывают, какие методы сжатия он принимает.
Accept-Encoding: gzip, deflateМы можем увидеть соответствующую информацию запроса в консоли браузера
совместимость
Когда дело доходит до браузера в качестве внешнего интерфейса, вы не можете не задаться вопросом, будут ли какие-либо браузеры, которые его не поддерживают?HTTP/1.0Он был выпущен в мае 1996 года. Хорошей новостью является то, что его поддерживают почти все браузеры. Стоит упомянуть, чтоie6В более ранних версиях есть ошибкаgZipошибка, позадиie6себя вWinXP SP2Эта проблема исправлена в , и количество пользователей с этой версией очень мало.
кто сжимает файл
Кажется, что это может сделать только сервер, и то, что мы чаще всего видим в Интернете, тоже такое, какnginxвключиgZipСтатьи вроде конфигурации, но сейчас популярен фронтендspaприменять, использоватьreact, vueТакие каркасы всегда сопровождаются этим набором собственных лесов, обычно используемыхwebpackВ качестве инструмента упаковки, который можно настроить, например,compression-webpack-pluginСделаем сгенерированный файлgZipДождитесь сжатия и сгенерируйте соответствующий сжатый файл, и наше приложение также может разместить слой в области обслуживания и интерфейсный файл во время фреймворка.nodeПриложение используется для аутентификации интерфейса и пересылки файлов.nodejsмы знакомы сexpressСуществует такжеcompressionпромежуточное ПО, можно включитьgZipВремя видеть, как люди запутались, как в конце концов, кто должен его использовать?
Сжатие при ответе сервера на запрос
фактическиnginxсжатие иnodeЭто то же самое, что и промежуточное программное обеспечение для сжатия во фреймворке: когда мы нажимаем на веб-страницу для отправки запроса, наш сервер находит соответствующий файл, затем сжимает файл и возвращает сжатый контент [Конечно, вы можете использовать кеш, чтобы уменьшить количество сжатий.], и настройте вышеупомянутыйContent-EncodingИнформация. Для некоторых приложений при архитектуре отсутствует восходящий прокси-уровень, например, сервер имеет один слойnodeВы можете напрямую использовать свой собственный плагин сжатия для сжатия файла, если восходящий поток оснащенnginxСлой обработки переадресации, лучше передатьnginxчтобы справиться с ними, поскольку у них есть контент, созданный специально для этого, чтобы лучше использовать кеши и уменьшить накладные расходы (многие написаны на c).
давайте посмотрим на некоторыеnginxоткрыть вgZipСжатая часть конфигурации
# 开启gzip
gzip on;
# 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
gzip_min_length 1k;
# gzip 压缩级别，1-10，数字越大压缩的越好，也越占用CPU时间，后面会有详细说明
gzip_comp_level 2;
# 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript;
Сжатие во время сборки приложения
Так как сервер может это сделать, почемуwebpackТак же есть такой плагин для сжатия при упаковке front-end приложений, можем его добавитьnginxвидно в конфигурацииgzip_comp_level 2Этот элемент конфигурации также прокомментирован выше.1-10Чем больше число, тем лучше эффект сжатия, но это потребует больше ресурсов ЦП и времени.В дополнение к уменьшению размера файла мы также сжимаем файл, чтобы сократить время передачи.Если мы настроим уровень сжатия на высокий уровень, каждый запрос к серверу будет выполняться.Сжатие перед возвратом информации занимает много времени, не только накладные расходы сервера сильно возрастут, но и запрашивающий также будет нетерпелив. Но сейчасspaПоскольку все файлы приложения упакованы и сгенерированы, что, если мы напрямую создадим файлы с высоким сжатием при упаковке, поместим их на сервер как статические ресурсы и напрямую вернем содержимое сжатого файла после получения запроса?
webpackизcompression-webpack-pluginИменно для этого и настраивается очень просто.Вам нужно только добавить соответствующий плагин на устройство.Простая настройка выглядит следующим образом
const CompressionWebpackPlugin = require('compression-webpack-plugin');
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp('\\.(js|css)$'),
threshold: 10240,
minRatio: 0.8
})
)webpackПосле того, как пакет завершится, файл пакета будет сгенерирован дополнительно.gzрасширение zip-файла
Итак, каков уровень сжатия этого плагина, мы можемисходный кодсм. значение по умолчаниюlevelда9
...
const zlib = require('zlib');
this.options.algorithm = zlib[this.options.algorithm];
...
this.options.compressionOptions = {
level: options.level || 9,
flush: options.flush
...
}Вы можете видеть, что сжатие используетzlibбиблиотека, покаzlibЧто касается оценки, по умолчанию используется 6 , а самый высокий уровень —9 Best compression (also zlib.Z_BEST_COMPRESSION),Потому что мы возвращаемся к упаковке и сборке проекта только один раз, поэтому мы используем самый продвинутый метод сжатия для сжатия и тратим больше времени на время построения.Для нас вообще нет потерь, и нам не нужно сжимать файлы на сервере. , просто найдите соответствующий сжатый файл и верните его напрямую.
Как сервер находит эти файлы
Относительно просто решить эту проблему на уровне приложения, например, приведенный выше сжатый файл будет генерироватьindex.css, index.jsО сжатом файле можно судить по простой обработке на стороне сервера, а затем получить соответствующий сжатый файл. кnodeизexpressНапример
...
app.get(['/index.js','/index.css'], function (req, res, next) {
req.url = req.url + '.gz'
res.set('Content-Encoding', 'gzip')
res.setHeader("Content-Type", generateType(req.path)) // 这里要根据请求文件设置content-type
next()
})Выше мы можем вернуться к запросуgZipСжатые данные, конечно, вышеуказанные ограничения слишком сильны и нецелесообразны, но уже есть много ресурсов, чтобы справиться с этим спросом,expressимеютexpress-static-gzipплагинkoaизkoa-staticПо умолчанию он поставляется сgZipОсновной принцип обнаружения файлов - сначала обнаружить запрос..gzСуществует ли файл с суффиксом, а затем возвращать другое содержимое в зависимости от результата.
Какие файлы можно сжать с помощью gZip
gZipВсе файлы можно сжимать, но это не значит, что нужно сжимать все файлы, написанный нами код (css,js) и другие файлы будут иметь хороший эффект сжатия, но такие файлы, как изображения, не будут сжаты.gzipСлишком сильное сжатие, потому что в них уже встроено некоторое сжатие, а распаковка некоторых файлов (например, некоторых уже сжатых, таких как файлы .zip) может увеличить результирующий файл. Разумеется, сжимать и без того небольшие файлы не нужно.
упражняться
можно включитьgZipОн должен быть включен Конкретное использование сжатия в реальном времени во время запроса или для создания сжатых файлов во время создания зависит от вашей конкретной бизнес-ситуации.