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

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

0 голосов
/ 21 мая 2018

Я пытаюсь понять, как правильно использовать webpack-html-plugin с плагином сжатия , документация о нем немного скудна.

Моя конфигурация веб-пакета объявляет: 

output: {
  filename: 'js/[name]-[hash].js',

Плагин сжатия запущен наконец 

new CompressionPlugin({
    asset: "[path].gz[query]",
    algorithm: "gzip"
})

В конце сценарии правильно создаются и сжимаются. 

js/app-caf3b4b3.js.gz     382 kB          [emitted]  [big]

Я могу объявить о предварительной загрузке файла gzipped в шаблоне index.html 

 <link rel="preload" href="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>.gz" as="script">

Но за вставку этой строки отвечает веб-пакет: 

<script type="text/javascript" src="/js/app-caf3b4b3.js">

внутри <body></body>

Как я могу попросить веб-пакет использовать сжатый скрипт?

Ответы [ 2 ]

0 голосов
/ 10 октября 2018

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

Шаги:

  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)$/,
       ...

      })
    ]
  }
};

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

0 голосов
/ 21 мая 2018

Вам не нужно связывать сжатый файл в html.Вы должны сделать это на стороне сервера.Вы также можете использовать файлы gzip 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

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

Нет похожих вопросов

...