Минимизируйте и сжимайте полезную нагрузку сети с помощью brotli

Michael DiBlasio

Совет: Чтобы следовать этой кодовой лаборатории, откройте демо-версию Glitch на второй вкладке.

Примечание. В этой лаборатории кода используются Chrome DevTools. Загрузите Chrome, если у вас его еще нет.

Эта лаборатория является расширением лаборатории по минимизации и сжатию сетевых полезных данных и предполагает, что вы знакомы с основными концепциями сжатия. По сравнению с другими алгоритмами сжатия, такими как gzip , в этой лаборатории кода показано, как сжатие Brotli ( br ) может еще больше уменьшить степень сжатия и общий размер вашего приложения.

Мера

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

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

1. Нажмите Remix to Edit, чтобы сделать проект доступным для редактирования.
2. Чтобы просмотреть сайт, нажмите «Просмотреть приложение» . Затем нажмите Полноэкранный режим .

В предыдущей лаборатории по минимизации и сжатию сетевых полезных данных мы уменьшили размер main.js с 225 КБ до 61,6 КБ. В этой лаборатории вы узнаете, как сжатие Brotli может еще больше уменьшить размер этого пакета.

Компрессия Бротли

Предупреждение. Многие хостинговые платформы, CDN и обратные прокси-серверы либо кодируют ресурсы со сжатием по умолчанию, либо позволяют настраивать их с меньшими усилиями. Если ваша хостинг-платформа поддерживает Brotli, вам, возможно, не потребуется настраивать сервер для сжатия ваших ресурсов с помощью Brotli, как описано в этом руководстве.

Brotli — это новый алгоритм сжатия, который может обеспечить даже лучшие результаты сжатия текста, чем gzip . Согласно CertSimple , производительность Brotli составляет:

• На 14 % меньше, чем gzip для JavaScript.
• На 21 % меньше, чем gzip для HTML.
• На 17 % меньше, чем gzip для CSS.

Чтобы использовать Brotli, ваш сервер должен поддерживать HTTPS. Brotli поддерживается во всех современных браузерах . Браузеры, поддерживающие Brotli, будут включать br в заголовки Accept-Encoding :

Accept-Encoding: gzip, deflate, br

Вы можете определить, какой алгоритм сжатия используется, используя поле Content-Encoding на вкладке «Сеть инструментов разработчика Chrome» ( Command+Option+I или Ctrl+Alt+I ):

Как включить Бротли

Способ настройки веб-сервера для отправки ресурсов, закодированных Brotli, зависит от того, как вы планируете их кодировать. Вы можете динамически сжимать ресурсы с помощью Brotli во время запроса (динамический) или закодировать их заранее, чтобы они уже были сжаты к тому моменту, когда пользователь их запросит (статический).

Динамическое сжатие

Динамическое сжатие предполагает сжатие ресурсов «на лету» по мере их запроса браузером.

Преимущества

• Создавать и обновлять сохраненные сжатые версии ресурсов не требуется.
• Сжатие «на лету» особенно хорошо работает для веб-страниц, которые генерируются динамически.

Недостатки

• Сжатие файлов на более высоких уровнях для достижения лучшей степени сжатия занимает больше времени. Это может привести к снижению производительности, поскольку пользователь ожидает сжатия ресурсов, прежде чем они будут отправлены сервером.

Динамическое сжатие с помощью Node и Express

Файл server.js отвечает за настройку сервера Node, на котором размещено приложение.

const express = require('express');
const app = express();
app.use(express.static('public'));

const listener = app.listen(process.env.PORT, function() {
  console.log(`Your app is listening on port ${listener.address().port}`);
});

Все, что нужно сделать, — это импортировать express и использовать промежуточное программное обеспечение express.static для загрузки всех статических файлов HTML, JS и CSS в public/directory (и эти файлы создаются веб-пакетом при каждой сборке).

Чтобы убедиться, что все ресурсы сжимаются с использованием brotli каждый раз, когда они запрашиваются, можно использовать модуль shrink-ray . Начните с добавления его как devDependency в package.json :

"devDependencies": {
  // ...
  "shrink-ray": "^0.1.3"
},

И импортируйте его в файл сервера server.js :

const express = require('express');
const shrinkRay = require('shrink-ray');

И добавьте его в качестве промежуточного программного обеспечения перед установкой express.static :

// ...
const app = express();

// Compress all requests
app.use(shrinkRay());
app.use(express.static('public'));

Теперь перезагрузите приложение и посмотрите на размер пакета на панели «Сеть»:

Теперь вы можете видеть, brotli применяется из bz в заголовке Content-Encoding . main.bundle.js уменьшен с 225 КБ до 53,1 КБ ! Это примерно на 14% меньше по сравнению с gzip (61,6 КБ).

Примечание. Brotli имеет одиннадцать уровней качества от 0 (без сжатия) до 9 (максимальное сжатие). Качество 1 очень быстрое, но менее эффективное, тогда как качество 11 очень медленное, но обеспечивает значительную экономию размера файла. Обратите внимание, что в отличие от стандартной библиотеки brotli, которая по умолчанию имеет качество 11 , shrink-ray по умолчанию установлено качество 4 , которое обычно больше подходит для динамического контента. Вы можете настроить параметры алгоритма Brotli, передав параметры options в shrinkRay([options]) .

Статическое сжатие

Идея статического сжатия заключается в предварительном сжатии и сохранении ресурсов.

Преимущества

• Задержка из-за высокого уровня сжатия больше не является проблемой. Для сжатия файлов ничего не нужно делать «на лету», поскольку теперь их можно получить напрямую.

Недостатки

• Ресурсы необходимо сжимать при каждой сборке. Время сборки может значительно увеличиться, если используются высокие уровни сжатия.

Статическое сжатие с помощью Node и Express с помощью веб-пакета

Поскольку статическое сжатие предполагает предварительное сжатие файлов, настройки веб-пакета можно изменить для сжатия ресурсов на этапе сборки. Для этого можно использовать brotli-webpack-plugin .

Начните с добавления его как devDependency в package.json :

"devDependencies": {
  // ...
 "brotli-webpack-plugin": "^1.1.0"
},

Как и любой другой плагин веб-пакета, импортируйте его в файл конфигурации webpack.config.js :

var path = require("path");

//...
var BrotliPlugin = require('brotli-webpack-plugin');

И включите его в массив плагинов:

module.exports = {
  // ...
  plugins: [
    // ...
    new BrotliPlugin({
      asset: '[file].br',
      test: /\.(js)$/
    })
  ]
},

Массив плагина использует следующие аргументы:

• asset : имя целевого актива.
• [file] заменяется исходным именем файла ресурса.
• test : обрабатываются все ресурсы, соответствующие этому RegExp (то есть ресурсы JavaScript, оканчивающиеся на .js ).

Например, main.js будет переименован в main.js.br

Когда приложение перезагружается и перестраивается, теперь создается сжатая версия основного пакета. Откройте консоль Glitch, чтобы посмотреть, что находится внутри последнего каталога public/ , обслуживаемого сервером Node.

1. Нажмите кнопку «Инструменты» .
2. Нажмите кнопку «Консоль» .
3. В консоли выполните следующие команды, чтобы перейти в public каталог и просмотреть все его файлы:

cd public
ls -lh

Версия пакета, сжатая Brotli, main.bundle.js.br , теперь также сохраняется здесь и имеет размер примерно на 76% меньше (225 КБ против 53 КБ), чем main.bundle.js .

Затем сообщите серверу отправлять эти файлы, сжатые Brotli, всякий раз, когда запрашиваются их исходные версии JS. Это можно сделать, определив новый маршрут в server.js до того, как файлы будут отправлены с помощью express.static .

const express = require('express');
const app = express();

app.get('*.js', (req, res, next) => {
  req.url = req.url + '.br';
  res.set('Content-Encoding', 'br');
  res.set('Content-Type', 'application/javascript; charset=UTF-8');
  next();
});

app.use(express.static('public'));

app.get используется, чтобы сообщить серверу, как ответить на запрос GET для определенной конечной точки. Затем используется функция обратного вызова, чтобы определить, как обрабатывать этот запрос. Маршрут работает следующим образом:

• Указание '*.js' в качестве первого аргумента означает, что это работает для каждой конечной точки, которая запускается для получения файла JS.
• В обратном вызове .br прикрепляется к URL-адресу запроса, а заголовку ответа Content-Encoding присваивается значение br .
• Заголовку Content-Type присвоено значение application/javascript; charset=UTF-8 для указания типа MIME.
• Наконец, next() гарантирует, что последовательность продолжится до любого обратного вызова, который может быть следующим.

Поскольку некоторые браузеры могут не поддерживать сжатие Brotli, убедитесь, что Brotli поддерживается, прежде чем возвращать файл, сжатый Brotli, проверив, что заголовок запроса Accept-Encoding включает br :

const express = require('express');
const app = express();

app.get('*.js', (req, res, next) => {
  if (req.header('Accept-Encoding').includes('br')) {
    req.url = req.url + '.br';
    console.log(req.header('Accept-Encoding'));
    res.set('Content-Encoding', 'br');
    res.set('Content-Type', 'application/javascript; charset=UTF-8');
  }

  next();
});

app.use(express.static('public'));

После перезагрузки приложения еще раз взгляните на панель «Сеть».

Успех! Вы использовали сжатие Brotli для дальнейшего сжатия своих ресурсов!

Заключение

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

Предупреждение: не забудьте проверить, поддерживает ли ваш CDN brotli прежде чем реализовывать его вручную. Если вам нужно реализовать brotli вручную (как описано в этой кодовой лаборатории), но у вас есть поддержка CDN для других алгоритмов сжатия, таких как gzip , рекомендуется сопоставить преимущества brotli с усилиями, необходимыми для реализации.