preface

  • Online music poke me ah!
  • Music blog source code online!
  • I believe ape friends are often teased in the development of slow page loading phenomenon, is also a very common phenomenon.
  • Next will introduce a solution is very practical, suggestions are used, encountered problems can leave a message in the comments section.

What is the problem with slow page loading?

Each page refresh is slow to load.

Let’s analyze why this problem exists.

Why does this happen?

Analysis stage:

Open the console to analyze the loading and rendering of the two files CSS/chunk-6876B81a.328bd992. CSS and JS /chunk-6876b81a.4401756b.js are very slow. Because the files are very large (6-7m), we need to compress the file size or split the file into several pieces.

How do you optimize this kind of problem?

Enable Gzip on the server (compression technology: compress on the server and then pass to the browser)

The code is as follows:

// Install the plug-in
cnpm i --save-dev compression-webpack-plugin

// Add it to vue-config.js
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = ['js'.'css'];
const isProduction = process.env.NODE_ENV === 'production'; .module.exports = {
....
  configureWebpack: config= > {
    if (isProduction) {
      config.plugins.push(new CompressionWebpackPlugin({
        algorithm: 'gzip'.test: new RegExp('\ \. (' + productionGzipExtensions.join('|') + '$'),
        threshold: 10240.minRatio: 0.8}}}}))Copy the code

You can see that gzip compression has been added. (Yes ~)

Package folders as follows:

Before using gzip compression:

After using gzip compression:

As you can see, gz files are added to the package (that is, the compressed files we give to the server), reducing the size of the file by about two thirds.

Go to nginx.conf in the conf directory, enable gzip, and set the type of gzip.

location /sw/ {
    gzip on;
    gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    alias /home/water/wcs/webSw/dist/;
    index  index.html index.htm;
}
Copy the code

If you are lucky, you will successfully start Gzip compression technology.

But I just am not that, please ape friend look down!

There may be problems | packaged failure

TypeError: Cannot read property ‘tapPromise’ of undefined

Finally found the version problem, is too high, so I went to the NPM’s official website https://www.npmjs.com/package/compression-webpack-plugin for compression will – webpack – 6.1.0 plugin version, Packing success again!

knowledge

Gzip, compression will – webpack – the plugin

reference

TypeError: Cannot read property ‘tapPromise’ of undefined. TypeError: Cannot read property ‘tapPromise’ of undefined

In the past to recommend

Vue-cli3 builds the component library

Vue implements dynamic routing (and the interviewer blows project highlights)

Axios manipulation in a project you didn’t know about (Core principles of handwriting, compatibility)

VuePress builds project component documentation

Vue koa2 + + nginx deployment

Vue-typescript-admin-template background management system

The original link

Juejin. Cn/post / 695380…