1. Use single-file components

The TMplate configuration we wrote actually needs to be compiled to be executed by the Render function

When using a DOM or JS string template, the template is compiled into the render function at run time, which is usually fun enough, but it can be a drag for performance-sensitive applications.

The easiest way to precompile a template is to use a single file component that automatically precompiles the relevant build Settings, so the built code already contains the compiled render function instead of the original template string, reducing the recompilation process. (Single-file component imports are handled directly with vue-loader, which is fast enough to use without vue-TMplate.)

2, use,Objaec.freeze()Improve performance

Refer to the vue source code, when defining the reactive type, if the freeze data, do not add the setter and getter

Github.com/vuejs/vue/b…

const property = Object.getOwnPropertyDescriptor(obj, key)
if (property && property.configurable === false) {
  return
}
Copy the code

3. Flatten the data store

Store flattens data, reducing nesting of data hierarchies and traversal.

4. List rendering optimization

If our application has an infinitely long or scrolling list, then windowing technology is used to optimize, rendering only a few areas of content, reducing the time to re-render components and create DOM nodes.

vue-virtual-scroll-list

vue-virtual-scroller

You can use the two libraries above to handle this

5. Skeleton screen

Webpack skeleton screen practices: www.jianshu.com/p/ec4bf33ab…

6. SSR server rendering

The implementation scheme can use nuxt.js

7. Lazy route loading

Router.vuejs.org/zh/guide/ad…

8. Gzip, Cache control, CDN

Open the GZIP

Volume comparison: 1541KB vs 466KB

Time comparison figure: 333ms vs 225ms

Operation steps:

1, installation package (the new version of the configuration seems to change ~~)

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

2. Webpack configuration

productionGzip: true,

productionGzipExtensions: ['js', 'css']
Copy the code

Nginx add configuration:

server { gzip on; Gzip on off gzip_static on; gzip_disable "msie6"; Gzip IE6 gzip_min_length 100k; #gzip compress minimum file size, Out of compression (self-adjusting) gzip_types text/plain Application/X-javascript text/ CSS Application/XML text/javascript application/x-httpd-php image/jpeg image/gif image/png; Zip file type... }Copy the code

CND acceleration

The vue package file will package all the third-party code into a vendor.js by default, we can strip out some of the oversized files and use CND resources. As shown in the figure, we separate vue/vuex/ vuE-Router/Axios to reduce vendor.js pressure.

1. Introduce CDN of external resources

2. Webpack handling (alias handling)

Key: indicates the name of the resource to be imported. Value: The name the module provides for external references

3. Remove references. If you want to avoid global contamination, you can define it as follows