[web page performance optimization] what about the slow loading speed of the first screen of SPA (single page application)?

---

---

Tips ： The following is the main body of this article , The following cases can be used for reference

One 、 What is first screen loading

First screen time （First Contentful Paint）, It refers to the web address entered by the browser from the response user , By the time the first screen content rendering is completed , At this time, the whole web page does not have to be completely rendered , But you need to show what the current window needs

The first screen loading can be said to be in the user experience above all Link

About calculating the first screen time

utilize performance.timing Data provided ：

adopt DOMContentLoad perhaps performance To calculate the first screen time

//  Scheme 1 ：
document.addEventListener('DOMContentLoaded', (event) => {
    
    console.log('first contentful painting');
});
//  Option two ：
performance.getEntriesByName("first-contentful-paint")[0].startTime

// performance.getEntriesByName("first-contentful-paint")[0]
//  Will return a  PerformancePaintTiming Example , The structure is as follows ：
{
    
  name: "first-contentful-paint",
  entryType: "paint",
  startTime: 507.80000002123415,
  duration: 0,
};

Two 、 The reason for slow loading

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

3、 ... and 、 Solution

Common ones SPA First screen optimization mode

• Reduce the size of the entry file
• Static resource local cache
• UI The frame loads on demand
• Compression of image resources
• Package components repeatedly
• Turn on GZip Compress
• Use SSR

Reduce the size of the entry file

The common method is lazy loading , Divide the components corresponding to different routes into different code blocks , When a route is requested, it will be packaged separately , Make the entry file smaller , The loading speed is greatly increased

stay vue-router When configuring routing , It adopts the form of dynamically loading routes

routes:[ 
    path: 'Blogs',
    name: 'ShowBlogs',
    component: () => import('./components/ShowBlogs.vue')
]

Load the route as a function , In this way, the respective routing files can be packaged separately , Only when parsing a given route , Will load the routing component

Static resource local cache

The back end returns the resource problem ：

• use HTTP cache , Set up Cache-Control,Last-Modified,Etag Equal response head
• use Service Worker Offline caching
  Rational utilization of front end localAtorage

UI The frame loads on demand

In daily use UI frame , for example element-UI、 perhaps antd, We often refer directly to the whole UI library

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

But in fact, if the only component used is a button , Pagination , form , Input and warning words We can introduce it on demand

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

Package components repeatedly

hypothesis A.js File is a common library , Now there are multiple routes in use A.js file , This causes duplicate file downloads
Solution ： stay webpack Of config In file , modify CommonsChunkPlugin Configuration of

minChunks: 3

minChunks by 3 It means that you will use 3 Pull out the bags for times and above , Put into the public dependency file , Avoid repeated loading of components

Compression of image resources

Although the picture resources are not in the encoding process , But it is the biggest factor that affects page performance

For all picture resources , We can compress properly

For the... Used on the page icon , You can use online font icons , Or sprite , Merge many small icons on the same diagram , To alleviate http Request pressure .

Turn on GZip Compress

After unpacking , We'll use gzip Do some compression install compression-webpack-plugin

cnmp i compression-webpack-plugin -D

stay vue.congig.js Introduce and modify webpack To configure

const CompressionPlugin = require('compression-webpack-plugin')

configureWebpack: (config) => {
    
        if (process.env.NODE_ENV === 'production') {
    
            //  Modify the configuration for the production environment ...
            config.mode = 'production'
            return {
    
                plugins: [new CompressionPlugin({
    
                    test: /\.js$|\.html$|\.css/, // Match file name 
                    threshold: 10240, // For more than 10k The data is compressed 
                    deleteOriginalAssets: false // Delete the original file or not 
                })]
            }
        }

We also need to make corresponding configuration on the server , If the browser that sent the request supports gzip , Just send it gzip File format , My server uses express It's framed , Just install it compression Can use

const compression = require('compression')
app.use(compression())  //  It is called before other middleware is used 

Use SSR

SSR（server side render）, That is, server-side rendering , Components or pages are generated by the server html character string , Sending it to the browser to build a server-side rendering from scratch is very complicated , vue It is recommended to use Nuxt.js Implement server-side rendering

---

summary

There are many ways to reduce the first screen rendering time , Generally speaking, it can be divided into two parts ： Resource loading optimization and Page rendering optimization
You can choose various ways to optimize the first screen rendering according to your project