Technology Sharing

Use GZip to compress the vendor.js file packaged by npm run build

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

vue-cli project

  1. Install npm i compression-webpack-plugin -D
npm i compression-webpack-plugin -D
  • 1
  1. Use: in vue.config.js file
const CompressionPlugin = require('compression-webpack-plugin')
module.exports = {
    configureWebpack: {
        plugins: [
            new CompressionPlugin({
                test: /.js$|.html$|.css/,
                threshold: 10240 // 只处理比这个值大的资源。按字节计算 设置的是 10kb
            })
        ]
    }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

insert image description here
You can see that the 1.2M vendors file is compressed to 295k, and the web page running speed is improved.
It can be opened within s.
If the style is not recognized, the CSS file will not be compressed. This function requires the backend to enable gzip so that such files can be recognized.