Введение
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.