current position:Home>Compression webpack plugin first screen loading optimization

Compression webpack plugin first screen loading optimization

2021-08-27 10:07:27 echo_ xiyu

This is my participation 8 The fourth of the yuegengwen challenge 10 God , Check out the activity details :8 Yuegengwen challenge

vue Reasons and solutions for slow page loading for the first time , And use compression-webpack-plugin Packed code compression Gzip

Packing for the first time vue Project to the server , Found that the first load is particularly slow, it takes dozens of seconds to load out , It's not as smooth as it is in a local development environment . The main reason is that the page is not configured after packaging, resulting in a very large resource file , It takes a lot of time to load all at once .

One 、 Plug in packaging .gz file

1. install

2. stay vue.config.js Configure plug-ins in

3. pack

Two 、nginx To configure

3、 ... and 、tomcat To configure

Comparison of effects before and after optimization :

As you can see from the picture , The loading time of the first screen has been improved a lot , from 5.55s Promoted to 578ms, There are two aspects to this optimization , The front end packages the files into .gz file , And then through nginx Configuration of , Let the browser parse directly .gz file .

One 、 Plug in packaging .gz file

1. install :

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

perhaps

yarn add compression-webpack-plugin --save-dev
 Copy code 

2. stay vue.config.js Configure plug-ins in :

const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
const isProduction = process.env.NODE_ENV === 'production'

  configureWebpack: {
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    },
     plugins: [
    // Ignore all locale files of moment.js
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),

    //  To configure compression-webpack-plugin Compress 
    new CompressionWebpackPlugin({
      algorithm: 'gzip',
      test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
      threshold: 10240,
      minRatio: 0.8
    }),
    new webpack.optimize.LimitChunkCountPlugin({
      maxChunks: 5,
      minChunkSize: 100
    })
  ],
  },
 Copy code 

3. pack

Package file size information :

Two 、nginx To configure

server{
    gzip on;
    gzip_buffers 32 4K;
    gzip_comp_level 6;
    gzip_min_length 100;
    gzip_types application/javascript text/css text/xml;
    gzip_disable "MSIE [1-6]\."; # Configuration disable gzip Conditions , Support regular . Here said ie6 And below are not enabled gzip( because ie Lower version not supported )
    gzip_vary on;
}
 Copy code 

3、 ... and 、tomcat To configure

If you don't use nginx, It is tomcat, So you need to go tomcat Of config File to modify :

<Connector port="8080"
  protocol="HTTP/1.1"
  connectionTimeout="20000"
  redirectPort="8443"
  compression="on"
  compressionMinSize="2048"
  useSendfile="false"
  noCompressionUserAgents="gozilla, traviata"
  compressableMimeType="text/html,text/xml,text/javascript, application/javascript,text/css,text/plain,text/json"/>
 Copy code 

compression="on" Open the compressed . Optional value :"on" Turn on ,"off" close ,"force" Everything is on .

copyright notice
author[echo_ xiyu],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827100724089H.html

Random recommended