Compression webpack plugin

I'm trying to figure out how to properly use webpack-html-plugin with the compression plugin, the documentation of latter is a bit scarce.

My webpack configuration declares :

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

The compression plugin is run at last

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

In the end the scripts are correctly produced and compressed.

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

I can declare the preloading of the gzipped file in the index.html template

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

But webpack is in charge for the insertion of this line :

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

inside of <body></body>

How can I ask webpack to use the compressed script ?

You don't need to link a compressed file in html. You must do this server-side. You can also gzip css and html files.

Set your server to send a file using gzip compression, you'll also need proper headers to tell the browser how to interpret that compressed file.

If you are using an Apache server you can enable gzip compression with an .htaccess file.

I use this for my Apache server:

# 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

You can google for more information on how to optimize a website with gzip compression.

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

You can do that via Webpack Compression Plugin from you Vue.js app or also from server side. I'll answer for the Vue app config.

Steps:

Create a vue.config.js file if not already present

Add something along these lines

const CompressionWebpackPlugin = require("compression-webpack-plugin");

module.exports = {

  configureWebpack: {

    plugins: [
      new CompressionWebpackPlugin({
        filename: "[path].gz[query]",
        algorithm: "gzip",
        test: /\.(js|css)$/,
       ...

      })
    ]
  }
};

More options available in plugin docs.

来源：https://stackoverflow.com/questions/50442039/compression-webpack-plugin

标签

javascript

Webpack

compression