Performance Optimization: how to solve the slow loading speed of the first screen of spa single page application?

SPA How to solve the slow loading speed of the first screen of a single page application ？

What is the first screen time

The first screen loading time refers to The time from the corresponding user entering the URL to the completion of the first screen content rendering , The entire website does not need to be fully loaded , But you need to show the content in the current visual window .

White screen time (First Paint)： The URL that the user enters from the browser is the address , By the time the browser starts displaying content .
White screen time = The time when the page starts to show - The time to start the request
First screen time (First Contentful Paint)： It means that the browser inputs the network address from the response user , By the time the first screen content rendering is completed .
First screen time = First screen content rendering end time point - The time to start the request

How to calculate the first screen loading time

1. In the console load Display the loading time of the first screen
   

2. adopt window.performance Object can get the performance related information of the current page

//  Calculate the loading time of the first screen (s)
let awiatTime = (performance.timing.domComplete - performance.timing.navigationStart) / 1000;

Why is the loading speed of the first screen slow , What is the cause ？ How to solve the problem of slow speed ？

• Network delay
• Too large file size : Load on demand 、 Compress 、 cache
  • Road load by lazy ： Pack the routing files separately , Only when a given route is parsed can the corresponding route component be loaded .
  • Static resource local cache : Rational use of the front end localStorage,sessionStorage And so on . use HTTP cache , Set up Cache-Control,Last-Modified,Etag Equal response head .
  • UI Libraries are loaded on demand : We are introducing elementUI perhaps antdesign etc. UI When the component , There is no need to introduce... Completely at one time , Just introduce the components we need . √
  • Image loading optimization （ Use compressible pictures , With lazy loading and preloading ）
  • GZip Compress : A kind of http Request optimization , Increase loading speed by reducing file size .html、js、css Documents even json Data can be compressed with it , Can reduce 60% The volume above . The front-end configuration gzip Compress , And the server uses nginx Turn on gzip, Used to reduce the traffic size of network transmission .
  • Packing volume （webpack Optimize ,tree-sharking And loading plug-ins on demand , as well as css Merge ）
  • Use CDN Caching static resources
  • Use SSR Server rendering
• Repeated requests : Through anti shake throttling , Reduce duplicate requests

Road load by lazy - Reduce the size of the entry file √

note :https://blog.csdn.net/qq_41370833/article/details/125299151?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22125299151%22%2C%22source%22%3A%22qq_41370833%22%7D&ctrtid=9odkn

Image loading optimization

Picture compression -webpack:file-loader+image-webpack-loader

First use image-webpack-loader Compressed pictures can be reused file-loader Copy the output to the packed static resource directory

//  The official sample 
rules: [{
    
  test: /\.(gif|png|jpe?g|svg)$/i,
  use: [
    'file-loader',
    {
    
      loader: 'image-webpack-loader',
      options: {
    
        bypassOnDebug: true, // [email protected]
        disable: true, // [email protected] and newer
      },
    },
  ]
}]

Picture lazy loading √

note :https://blog.csdn.net/qq_41370833/article/details/125284975?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22125284975%22%2C%22source%22%3A%22qq_41370833%22%7D&ctrtid=wL4FF

Use CDN Static resource caching +webpack:externals - Improve the response speed of the first request for resources / Reduce the size of the entry file √

adopt import Third party dependency package for syntax import , It will eventually be packaged and merged into the same file , This leads to the success of packaging , The volume of single file is too large .
To solve this problem , Can load external CDN resources , adopt webpack Of externals attribute , To configure it so that it is not packaged

Case study
introduce vue and element-ui

  <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
  <!--  Introducing styles  -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!--  Import component library  -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  //console.log(window) Will find CDN Way to introduce vue、element-ui The exposed global variable is named Vue、ELEMENT

To configure externals

module.exports = {
    
  externals: {
    
    'vue': 'Vue',
    'element-ui': 'ELEMENT',
  }
}

CDN Learning notes :https://editor.csdn.net/md/?articleId=125171191

Static resource local cache /HTTP cache - Improve the response speed of secondary requests √

note :https://editor.csdn.net/md/?articleId=125171191

Avoid repeated packaging of components -webpack:CommonsChunkPlugin The plug-in reduces the volume of the entry file

hypothesis A.js File is a common library , Now there are multiple routes in use A.js file , This causes repeated loading
CommonsChunkPlugin plug-in unit ： By removing the common module , The final composite file can be loaded once at the beginning , It's stored in the cache for later use .

webpack Packaging volume optimization

tree shaking Remove unused code , Reduce code size
Tree shaking The essence of is to eliminate useless JavaScript Code .

tree shaking Premise of use

• Use ES6 Write module code according to the specification ES6 The module dependency of is certain , It has nothing to do with the runtime state
• In the production environment

Load modules on demand code split The code segment

1. Can be node_modules The code is packaged separately into a chunk Output
2. It will automatically analyze multiple entries chunk in , Are there any public documents , If so, it will be packaged into a separate one chunk No repeated packaging
3. Multi entry page
4.- import Dynamic reference module

Turn on GZip Compress -- Reduce the transmission time in the network √

After unpacking , We'll use gzip Do some compression
gizp Compression is a kind of http Request optimization , Increase loading speed by reducing file size .
html、js、css Documents even json Data can be compressed with it , Can reduce 60% The volume above .

compression-webpack-plugin plug-in unit

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

configureWebpack: config => {
    
    if (process.env.NODE_ENV === 'production') {
    
        return {
    
            plugins: [new CompressionPlugin({
    
                test: /\.js$|\.html$|\.css/,
                threshold: 10240,
                deleteOriginalAssets: false
            })]
        }
    }
}

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

HTTP2

todo