Spa first screen loading optimization

First screen loading

Is to enter the web address from , To render all resources to the page , The first screen loading can be said to be in the user experience above all Link , Due to single page application , Resource volume is too large , The first full load takes , Causes white screen

Load too slow

In the process of page rendering , The factors leading to slow loading speed may be as follows ：

• Network delay problem
• Whether the volume of the resource file is too large
• Whether the resource repeatedly sends requests to load
• When loading scripts , The rendering is blocked

resolvent

Reduce the size of the entry file

For example, routing lazy loading and asynchronous components , When configuring the route, the route is dynamically loaded

 {
    path: '/404',
    component: () => import('@/views/404'),
  },

Static resource local cache

Forced cache and negotiation cache are adopted , Set up Cache-Control, Last-Modified, Etag Field

Reasonable use localStorage

UI The frame loads on demand

For example, using element-ui When the framework , Don't import the whole framework completely when using components , Should be imported on demand

Import all ：

import ElementUI from 'element-ui'
Vue.use(ElementUI)

Import on demand ：

import { Button, Input } from 'element-ui';
Vue.use(Button)
Vue.use(Input)

Compression of image resources

Small picture base64 turn , Or use online font icons 、 Sprite chart reduces server pressure

Use SSR

SSR（Server side ）, That is, server-side rendering , Components or pages are generated by the server html character string , And send it to the browser

Building a server-side rendering from scratch is very complex , Vue It is recommended to use Nuxt.js Implement server-side rendering