Vue SPA single-page application home screen optimization practice

1. Code compression (gzip)

If you are using nginx server, please modify the configuration file (other web servers are similar):sudo nano /etc/nginx/

Add to Gzip Settings:

gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_comp_level 5;
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php;

• gzip
  • Turn on or off the gzip module, use on here to start
• gzip_min_length
  • Sets the minimum number of bytes of pages that are allowed to be compressed. The default value is 0, no matter how large the page is, it will be compressed.
• gzip_buffers
  • Set up the system to obtain several units of cache to store the compressed result data stream of gzip. 4 16k means 16k as units, and 4 times the original data size is 16k as units.
• gzip_comp_level
  • Compression ratio, compression ratio 1 has the fastest processing speed, compression ratio 9 has the largest but the slowest processing (fast transmission but relatively consuming CPU)
• gzip_types
  • Match MIME type for compression, (regardless of whether or not) the "text/html" type will always be compressed

I configured this way and compressed a file that needs to be downloaded on the home page from 716KB to 246KB. Optimization ratio is 66%.

If you do not enable gzip on the server side, you can also enable compression of front and back end codes

If your backend uses frameworks to provide web services, you can use compressed middleware to do thisgzip compression．

var compression = require('compression');
var express = require('express');
var app = express();
(compression());

If your front-end is a project generated using vue-cli, then code compression has been enabled in the Webpack configuration file (production environment).

2. Introduce external files as needed ||No external files are used, make your own wheels

Use in a projectElementIn the event, introduce it as needed:

Install firstbabel-plugin-component：

npm install babel-plugin-component -D

It allows us to introduce only the required components to achieve the purpose of reducing the size of the project.

PS: If an error is reported at this time:

Error: post install error, please remove node_modules before retry

This iscnpmThe pot. The reason is unknown. The solution is to use npm to install this module. (I have tried to remove the node_modules file, but the error still occurs)

If you use Ajax-related libraries, such as vue-resource/axios

Remove it and implement an Ajax library yourself.

For example, my project only involvesget,post, then vue-resource/axios is unnecessary for me.

So I encapsulate a library (supports Promise, not IE) and use it as a plug-in in Vue:

/*  */
class XHR {
 get(url) {
  return new Promise((resolve, reject) => {
   const xhr = new XMLHttpRequest();
    = () => {
    if ( === 4) {
     if ( >= 200 && ( < 300 ||  === 304)) {
      if () {
       resolve(());
      } else {
       resolve();
      }
     } else {
      reject(`XHR unsuccessful:${}`);
     }
    }
   };
   ('get', url, true);
   ('content-type', 'application/json');
   (null);
  });
 }

 post(url, data) {
  return new Promise((resolve, reject) => {
   const xhr = new XMLHttpRequest();
    = () => {
    if ( === 4) {
     if ( >= 200 && ( < 300 ||  === 304)) {
      resolve(());
     } else {
      reject(`XHR unsuccessful:${}`);
     }
    }
   };
   ('post', url, true);
   ('content-type', 'application/json');
   ((data));
  });
 }
}

/* Vue plugin requires the install method: /v2/guide/ */
 = (Vue) => {
 .$get = new XHR().get;
 .$post = new XHR().post;
};

export default XHR;

This method can generally reduce the file by tens of KB. For example, vue-resource has 35KB, mine has only 1.9KB.

3. Code Splitting

As the name suggests, it means that the code is divided into blocks and loaded on demand. In this way, if the blocks that are not needed on the first screen will not need to be loaded.

It may be more useful for large projects, because the files required on the home page in my project are basically the same as those required on other pages, so code chunking is unnecessary for my project.

4. Lazy loading of routing components

When building an application in package, the Javascript package becomes very large, affecting page loading. If we can divide the corresponding components of different routes into different code blocks, and then load the corresponding components when the route is accessed, this will be more efficient

Combined with VueAsynchronous Componentsand Webpackcode splitting feature, can easily realize lazy loading of routing components.

What we need to do is define the corresponding component of the route as an asynchronous component:

const Foo = resolve => {
 /* is a special syntax of Webpack, used to set code-split point
  (Code blocks)*/
 (['./'], () => {
 resolve(require('./'))
 })
}
/* Another way to write */
const Foo = resolve => require(['./'], resolve);

No need to change any routing configuration, use Foo as before:

const router = new VueRouter({
 routes: [
 { path: '/foo', component: Foo }
 ]
})

4. Webpack2 Tree-shaking

Tree-shaking Used to eliminate unused code.

Tree-shaking is generally not available for individual small projects. Because you won't write unused code. It may be possible to try it on a large scale project.

5. Reduce unnecessary data in XHR.

For example, in my project, the home page only requires the blog Title, id and Tags. Time and Content are not needed anymore, and Content is generally large (usually about 10KB per article).

6. SSR (Server Side Render/Server Side Render)

This is a bit difficult to do. But the effect seems to be pretty good. I've beenIn Vue documentationI just looked at it briefly and planned to do it if I had any demand in the future.

7. I won’t go into details about other pictures such as lazy loading, as common sense that front-end developers should have.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.