Плагин сжатия веб-пакетов

Связывать сжатый файл в формате html не нужно. Вы должны делать это на стороне сервера. Вы также можете сжать файлы css и html.

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

Если вы используете сервер Apache, вы можете включить сжатие gzip с файлом .htaccess.

Я использую это для своего сервера Apache:

# enable the rewrite capabilities
RewriteEngine On

# prevents the rule from being overrided by .htaccess files in subdirectories
RewriteOptions InheritDownBefore

# provide a URL-path base (not a file-path base) for any relative paths in the rule's target
RewriteBase /

# GZIP
## allows you to have certain browsers uncompress information on the fly
AddEncoding gzip .gz
## serve gzip .css files if they exist and the client accepts gzip
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule ^(.*)\.css $1\.css\.gz [QSA]
## serve gzip .js files if they exist and the client accepts gzip
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule ^(.*)\.js $1\.js\.gz [QSA]
## serve gzip .html files if they exist and the client accepts gzip
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule ^(.*)\.html $1\.html\.gz [QSA]
## serve correct content types, and prevent mod_deflate double gzip
RewriteRule \.css\.gz$ - [T=text/css,E=no-gzip:1,E=is_gzip:1]
RewriteRule \.js\.gz$ - [T=text/javascript,E=no-gzip:1,E=is_gzip:1]
RewriteRule \.html\.gz$ - [T=text/html,E=no-gzip:1,E=is_gzip:1]
Header set Content-Encoding "gzip" env=is_gzip

Вы можете найти в Google дополнительную информацию о как оптимизировать сайт с помощью сжатия gzip.

https://gtmetrix.com/enable-gzip-compression.html

https://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer#text_compression_with_gzip

Вы можете сделать это через Плагин сжатия Webpack из вашего приложения SPA или также со стороны сервера. Я отвечу за спа-центр Vue.js, на котором я его тестировал для конфигурации. Веб-пакеты React и Angular не будут отличаться, за исключением имен файлов конфигурации.

Шаги:

1. Создайте файл vue.config.js, если он еще не существует

2. Добавьте что-нибудь в этом роде

   const CompressionWebpackPlugin = require("compression-webpack-plugin");
   
   module.exports = {
   
     configureWebpack: {
   
       plugins: [
         new CompressionWebpackPlugin({
           filename: "[path].gz[query]",
           algorithm: "gzip",
           test: /\.(js|css)$/,
          ...
   
         })
       ]
     }
   };
   

Дополнительные параметры доступны в документации плагина.