Open the Gzip

The original address: https://www.mulingyuer.com/archives/422/Copy the code

Vue-cli4 Enabling gzip Compression Nginx enables gzip

yarn add compression-webpack-plugin@6.11.
Copy the code

configuration

  • The configuration filevue.config.js
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
 configureWebpack: config= > {
    if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [
          new CompressionPlugin({
            algorithm: 'gzip'.test: /\.(js|css)$/.// Match the file name
            threshold: 10240.// Compress data over 10K
            deleteOriginalAssets: false.// Do not delete the source file
            minRatio: 0.8 / / compression ratio})]}}}}Copy the code
  • Then package the project and you will find many gzip packages in the JS folder.

Nginx configuration

Add gzip_static on to the nginx configuration file. Enable gzip compression

Check whether Gzip is enabled

Request header: accept-encoding: gzip, deflate response header: Content-encoding: gzipCopy the code

Actual effect screenshot