Введение

Webpack — это популярный сборщик модулей, используемый во внешнем интерфейсе. Он служит своей цели, объединяя статические файлы для отображения в браузере клиента с помощью различных механизмов.

Итак, в этом блоге мы рассмотрим, как пакет webpack можно оптимизировать с помощью известного алгоритма сжатия, такого как gzip, с помощью инструментария webpack.

Сжатие с помощью Gzip

Для этого я работаю над веб-приложением в React.js. Итак, у меня есть вся конфигурация веб-пакета, удаленная из семени приложения create response, чтобы добавить дополнительную оптимизацию.

Шаг 1:

Установите сжатие-webpack-plugin с помощью менеджера пакетов.

npm i сжатие-webpack-plugin -D

Шаг 2:

Перейдите в файл конфигурации веб-пакета -webpack.config.js

Импортируйте плагин в файл конфигурации

const CompressionPlugin = require("сжатие-webpack-plugin");

Добавьте приведенный ниже фрагмент в раздел plugins, где он содержит множество добавленных к нему плагинов.

с помощью этого плагина мы сообщаем типы файлов для сжатия и имя сжатого файла.

Шаг 3.

Создайте исходный код пользовательского интерфейса с помощью скрипта npm. После успешного запуска сборки мы можем увидеть новые типы расширений файлов с .gz, добавленными в статические ресурсы каталога сборки.

Эти файлы .gz представляют собой сжатый файл gzip, сгенерированный подключаемым модулем Our Webpack, который мы настроили на шаге 2.

Шаг 4:

Теперь попробуйте запустить файлы сборки, чтобы увидеть, выбираются ли наши сжатые файлы и обрабатываются ли они в браузере. Я обслуживаю проект, используя Express Server с экспресс-статическим промежуточным программным обеспечением. Папка build содержит статические файлы сборки webpack.

Все еще не сможете увидеть, как наш файл Gzip обрабатывается, и выбираются только обычные файлы сборки?

Как видно из заголовка Content-Type, наши файлы .gz не отображаются.

Это связано с тем, что некоторая конфигурация для чтения файла gzip по-прежнему отсутствует на нашем уровне сервера Express для их рендеринга.

Шаг 5.

Добавьте промежуточное ПО Express static GZIP для рендеринга и распаковки статических файлов .gz со стороны нашего сервера. Итак, давайте установим пакет и добавим конфигурацию.

npm я экспресс-статический-gzip

Теперь мы заменим express static на express-static-gzip.

const expressStaticGzip = require('express-static-gzip')

app.use(expressStaticGzip("сборка"))

Вот и все. Теперь мы должны увидеть рендеринг нашего сжатого файла из браузера с заголовком Content-Encoding, где кодируются и рендерятся сжатые файлы gzip.