Vue packing volume optimization artifact gzip, don’t you know it yet?

When we package the project online, we find that the package volume after build is large, and the loading speed of the first screen is slow. Gzip can obviously and effectively solve this problem. Its principle is to compress the original JS and CSS files, so as to reduce the file size and speed up the first screen access speed

The following is the configuration of gzip

1. Found in Vue project vue.conf.js File (old version in config/ index.js&build/webpack . prod.conf.js Medium configuration)

​

2. Introduce compression webpack plugin & in the file header to define the compressed file type. The configuration is as follows

​

3. Add the plugins key configuration below

​

vue.conf.js Complete code

//Import compression webpack plugin
const CompressionWebpackPlugin = require('compression-webpack-plugin')
//Define compressed file type
const productionGzipExtensions = ['js', 'css']

module.exports = {
  pages: {
    index: {
      entry: "src/main.js",
      // template: "public/index.html",
      // filename: "index.html",
      //When using the title option,
      //The title tag in template needs to be < title > <%= htmlWebpackPlugin.options.title  %></title>
      Title: "merchant background management"
    }
  },
    //Repair HMR
  chainWebpack: config => {
    config.resolve.symlinks(true);
  },
  //Port configuration
  devServer: {
    // host: "192.168.1.200",
    Port: 8080, // port number
    hotOnly: false,
    https: false, // https:{type:Boolean}
    Open: true, // configure auto start browser
    Proxy: null // configure cross domain processing. There is only one proxy
  },

  css: {
    sourceMap: false,
    loaderOptions: {
      //Introduce sass public variable file
      sass: {
        prependData: `@import "@/assets/element-variables.scss";`
      }
    }
  },
  configureWebpack: {
    plugins: [
      new CompressionWebpackPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: new RegExp('.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      })
    ]
  },
  //Enable eslint
  lintOnSave: false,

  //The. Map file is not generated when packaging
  productionSourceMap: false,
  
};

4. When we run NPM run build on the terminal, we will find a. GZ file, which proves to be successful! If the dist folder becomes larger, it is normal because we did not delete the source file

​

5. The last step is to nginx.conf Configure gzip

user  root;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;
    gzip on;
    gzip_min_length 1k;
    gzip_buffers 4 16k;
    #gzip_http_version 1.0;
    gzip_comp_level 2;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary off;
    gzip_disable "MSIE [1-6].";


    proxy_buffering    off;
    proxy_set_header   X-Real-IP $remote_addr;
    proxy_set_header   X-Forwarded-Proto $scheme;
    proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_http_version 1.1;

    client_max_body_size 10M; 

     include /etc/nginx/conf.d/*.conf;
    
     server {
         listen       80;
         server_name  xxx;
  
     }


}

​

6. Restart nginx and use it simultaneouslyWebmaster gzip detection toolCheck it out, it’s done!

​