Detailed explanation of the configuration of Gzip-compressed nginx with Vue3

Enable gzip compression in Vue CLI3

To enable gzip compression in Vue CLI3, you can use the compression-webpack-plugin plugin.

1. Install plug-in: compression-webpack-plugin

Run the following command in the terminal to install the compression-webpack-plugin plugin:

npm install --save-dev compression-webpack-plugin

2. Modify the configuration:

Add the following code to the file:

const CompressionPlugin = require('compression-webpack-plugin');
 = {
  configureWebpack: {
    plugins: [
      new CompressionPlugin({
        algorithm: 'gzip', // Use gzip compression        test: /\.js$|\.html$|\.mp4$|\.*$|\.css$/, // Match file names        filename: '[path][base].gz[query]', // Compressed file name (keep the original file name with suffix plus .gz)        minRatio: 1, // Compression rate is less than 1 will be compressed        threshold: 10240, // Compress data over 10k        deleteOriginalAssets: false, // Whether to delete uncompressed source files, please set them carefully. If you want to provide non-gzip resources, you can not set them or set them to false (for example, you can also load them to the original resource file after deleting the packaged gz)      })
    ]
  }
}

This will add the compression-webpack-plugin plugin in the webpack configuration and configure it to compress the .js, .html and .css files.

3. Rebuild: Rebuild the Vue project

The compressed file should have been generated.

If the build is successful, you should see the compressed file in the dist directory, for example, etc.

Edit Nginx configuration file

#Enable gzip compression functiongzip on;
gzip_min_length 1024;
gzip_buffers 4 16k;
gzip_comp_level 2;
gzip_types *;
gzip_vary on;

The above is the detailed explanation of the configuration of Vue3 using gzip compressed nginx. For more information about Vue3's gzip compressed nginx configuration, please follow my other related articles!