You can use the Chrome Performance tool to find out the cause

Resources are too big

If packed JS, CSS, font and other resources affect the loading speed, you can compress them to speed up the loading. Resources are gzip compressed with the help of compression-webpack-plugin

  • The installation
npm i -D compression-webpack-plugin
Copy the code
  • use
const CompressionPlugin = require("compression-webpack-plugin")

module.exports = {
  plugins: [
    new CompressionPlugin(...options)
  ]
}
Copy the code

Enable Gzip compression in the nginx layer

gzip on; // on is enable, off is disable gzip_buffers 16 8k; // How much memory is used to cache compression results. '16 8K' indicates that gzip_comp_level 4 is obtained in 8K *16 units; // Gzip compression ratio (1-9) : the smaller the compression effect is, the slower the processing is. Generally, gzip_http_version 1.0 is the intermediate value. Gzip_min_length 1280; gzip_min_length 1280; // Set the minimum number of bytes allowed for page compression, Page bytes gzip_types text/plain text/ CSS text/ XML application/ X-javascript application/ XML // Is obtained from the Content-Length in the header For a specific MIME type, where"text/html"Application/XML + RSS application/json application/javascript text/*; gzip_vary on; // Enable the response header Vary: accept-encodingCopy the code

Compression improves page loading speed