The first screen loading needs to be considered from multiple dimensions. The first screen loading takes most of the time to request server resources, js data processing and browser rendering. Starting from these three aspects, I believe that most of the problems of slow first screen loading can be solved:

webpack:

1. Enable gzip compression during project packaging

2. Do not package sourcemAP files [1]

3. Don’t pack library files

Image:

1. Lazy loading of images

2. Use Sprite

3. Font ICONS instead of pictures

4. Replace JPEG and JPG with WebP, SVG, Base64 and other image formats

vue:

1. Use lazy route loading

2. Third-party plug-ins are introduced on demand

Server level:

1. Upload static resources to the CDN

2. Nginx enables giZP transmission

3. Open http2.0

css:

1. Merge multiple CSS to reduce HTTP requests

2. The CSS file comes first

js:

1. Use asynchronous loading

2. The script is at the bottom

For mobile phone, you can consider adding a skeleton screen to achieve a better user experience.

[1] Sourcemap is designed to make it easier to debug online code because it is compressed, and it is like adding an index dictionary to locate the source code when problems occur.