One reason for

The HTML of single-page application is generated by JS, because the first screen needs to load large JS files (app.js and vvendor. Js), so when the network speed is not good, there will be a certain degree of white screen.

Two solutions

1. Routes and components are loaded lazily

Check out my previous article vUE Route Lazy Loading and Component Lazy Loading >>, which will not be covered here.

2. Optimize CDN resources

The full name of the CDN is Content Delivery Network. CDN is a content distribution network built on the network. It relies on edge servers deployed in various places and through the load balancing, content distribution, scheduling and other functional modules of the central platform, users can obtain the required content nearby, reduce network congestion, and improve user access response speed and hit ratio. The key technologies of CDN are content storage and distribution. As the project grows and relies on more third-party NPM packages, the files that are built will become larger. Coupled with the fact that it’s a single-page application, this can lead to long periods of white screen time on slow network speeds or with limited server bandwidth. At this time, we can use the CDN method to optimize the network loading speed

  1. Change vue, Vue-router, vuex, and Axios to CDN links and insert the corresponding links in index.html.
The < body > < div id = "app" > < / div > < script SRC = "https://cdn.bootcss.com/vue/2.6.10/vue.min.js" > < / script > < script SRC = "https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js" > < / script > < script SRC = "https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js" > < / script > < script SRC = "https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js" > < / script > < script SRC = "https://cdn.bootcss.com/element-ui/2.6.1/index.js" > < / script > < / body >Copy the code
  1. Configure the externals attribute in vue.config.js
Module. Exports = {... externals: {' vue ':' vue ', 'vuex' : 'vuex', 'vue - the router' : 'VueRouter', 'axios' :' axios'}}Copy the code
  1. Uninstall the dependent NPM packages
npm uninstall  vue vue-router vuex axios
Copy the code

3. Gzip accelerated optimization

All modern browsers support GZIP compression. Enabling GZIP compression can significantly reduce the size of transfer resources, shorten resource download time, reduce the first white screen time, and improve user experience. Gzip works best for text-based files (such as CSS, JavaScript, and HTML), and can achieve 70-90% compression rates for larger files. It doesn’t work well for resources that have already been compressed (such as images).

const CompressionPlugin = require('compression-webpack-plugin') configureWebpack: (config) => {if (process.env.node_env === 'production') {config.plugins.push(new CompressionPlugin({// gzip compress configuration Test: / \. Js $| \. HTML $| \. CSS /, / / matching filename threshold: 10240, / / to compression of the data of more than 10 KB deleteOriginalAssets: False, // whether to delete the original file}))}}Copy the code

4. Close the map file in vue.config.js to reduce many map files

ProductionSourceMap is used to locate the code when an error is reported. You can set it to false if you don’t want people to see the source code, and you can reduce the size of the package and encrypt the source code.

productionSourceMap: false
Copy the code

5. SSR, server rendering, pre-assembled HTML required for the home page on the server

6. Loading or skeleton screen on the home page (optimized experience)

With the gradual popularity of SPA in the front end, single-page applications inevitably bring pressure to the home page loading, at this time, a good home page user experience is very important. Many apps use a “skeleton screen” to display unloaded content, giving users a completely new experience. The so-called skeleton screen is to use some graphics to occupy the space before the page content is loaded, and then replace it after the content is loaded. During this process, users can sense that content is gradually loading and about to be presented, reducing the negative experience of “white screen”. Click to view the detailed skeleton screen introduction >>

Thanks for the article blog.csdn.net/m0_48076809…

If this article is helpful to you, thank you for clicking a free care heart, your support is the biggest motivation for my progress!