Vue project package file is too large, use compression-webpack-plugin compression file, configure decompression gz file

At the beginning of packaging, I found that the packed files were over 10M, the first screen loading was very slow and the files were quite large, so I sorted out the Webpack plug-in and compressed the packed files. NPM install compression-webpack-plugin –save-dev is configured in vue.config.js

const path = require("path");
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = ["js"."css"];
Copy the code

Exports = {}

  configureWebpack:{
  plugins: [
    new CompressionWebpackPlugin({
      filename: "[path].gz[query]".algorithm: "gzip".test: new RegExp('\\.(js|css)$'), // Match the file name
      threshold: 10240.// Compress data above 10K
      minRatio: 0.8.deleteOriginalAssets: true // If you want to delete the source file, there will be no js files, but only gz files}})]Copy the code

NPM run build: NPM run build: NPM run build: NPM run build: NPM run build: NPM run build: NPM run build: NPM run build: NPM run build: NPM run build: NPM run build: NPM run build: NPM run build: NPM run build. Configure in HTTP

gzip on;
gzip_static on;
gzip_min_length 1k;
gzip_buffers 4 32k;
gzip_http_version 1.1;
gzip_comp_level 2;
gzip_types text/plain application/x-javascript text/css application/xml;
gzip_vary on;
gzip_disable "MSIE [1-6].";
Copy the code

The server can now read the.gz file normally,