Four ways to determine whether two arrays have the same elements in js

before use

After use

method

webpack configuration Compression-webpack-plugin compresses gzip files

Function: Improve network transmission rate -> optimize web page loading time

Fundamental

• When the browser requests a resource file, it will automatically include an Accept-Encoding request header to tell the server what compression encoding type it supports.
• Server configuration turns on the gzip option: when receiving a client resource file request, check the compression encoding format supported by the request header Content-encoding. If it contains gzip, perform gzip encoding and compression before each response to the resource request and then respond to the resource file (in the response The header will carry Content-encoding: gzip)
• After receiving the response, the browser checks whether the request header contains Content-encoding:gzip. If so, it decompresses the returned resource file and then parses and renders it.

Specific use

1.Install the plug-in

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

2. Configure the plug-in

const CompressionPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
module.exports = {
    publicPath: './',
    productionSourceMap: false,
    configureWebpack: {...},
    chainWebpack: config => {
        config.resolve.alias.set('@', resolve('src'));
        if (process.env.NODE_ENV === 'production') {
            config.plugin('compressionPlugin')
            .use(new CompressionPlugin({
                filename: '[path].gz[query]',
                algorithm: 'gzip',
                test: productionGzipExtensions,
                threshold: 10240,
                minRatio: 0.8,
                deleteOriginalAssets: true
            }));
        }
    },
};

or

const CompressionPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = ['js', 'css']
module.exports = {
 configureWebpack: {
    // provide the app's title in webpack's name field, so that it can be accessed
    // in index.html to inject the correct title.
    name: name,
    resolve: {
      alias: {
        '@': resolve('src'),
      },
    },
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'windows.jQuery': 'jquery',
      }),
      new CompressionPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      })
    ],
  }
}

3.nginx configuration

http {
  gzip on; #on为启用，off为关闭
    gzip_static on;
    gzip_min_length 1k; #设置允许压缩的页面最小字节数，页面字节数从header头中的Content-Length中进行获取。默认值是0，不管页面多大都压缩。建议设置成大于1k的字节数，小于1k可能会越压越大。
    gzip_buffers 4 32k; #获取多少内存用于缓存压缩结果，‘4 16k'表示以16k*4为单位获得
    gzip_http_version 1.1; #识别http协议的版本,早起浏览器可能不支持gzip自解压,用户会看到乱码
    gzip_comp_level 2; #gzip压缩比（1~9），越小压缩效果越差，但是越大处理越慢，所以一般取中间值;
    gzip_types text/plain application/x-javascript text/css application/xml;#对特定的MIME类型生效,其中'text/html'被系统强制启用
    gzip_vary on; #启用应答头"Vary: Accept-Encoding"
    gzip_disable "MSIE [1-6].";#配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
}

The above are the details of the specific usage of gzip compression when packaging vue projects. For more information about gzip compression when packaging vue, please pay attention to other related articles!

Four ways to judge whether two arrays have the same elements in js/Four ways to judge whether two arrays have the same elements in js/Four ways to judge whether two arrays have the same elements in js/Js to judge whether two arrays have the same elements Four methods of elements