1. The loading process of single spa page
1. First of all, it is html, that is, the FP stage
<div ></div>
After navigation, the page presents a different time point from the content before navigation for the first time. Something comes back and renders it on the page.
2. Then there are static resources css and js, then parse js and generate HTML, that is, the FCP stage. The css and js resources are loaded, and the first content is drawn, there is a large structure.
<div > <div class="header"></div> </div>
For example, there is a header, div in the root directory of the app
3. Finally, after FMP, ajax requests data, it is effectively drawn for the first time, that is, the page is almost loaded, but the picture may not have been loaded yet
4. Summary
The process from FP to FMP is all white screen. Maybe if your header has a big background color, the background color may come out. Only after ajax will we truly parse our data and put the data into our html tag
2. Reasons for slow loading of home page
In the vue project, js and css introduced into the project will be packaged and entered. If there are many third-party libraries introduced, the package will be huge in size. The browser will only enter the first screen after loading the file. If the volume is too large, the longer the loading time and the longer the white screen time will be
3. Solution to slow loading speed
1. Separate and package third-party resource packages
Configuring externals in the build folder can separate and package third-party resource packages. Key is the name of the dependent package and value is the global variable thrown by the source code. In this way, after packaging, these files will not be packaged into the company, which will greatly reduce the packaging volume. (Especially, your project uses multiple three-party libraries)
This method is to avoid packing these resources into the bundle and, but to obtain the required dependencies and resources at runtime, greatly reducing the packaging volume.
2. Third-party libraries are introduced using CDN
In project development, we will use many third-party libraries. If it can be introduced on demand, we can only introduce the components we need to reduce the space occupied, but there are also some that cannot be introduced on demand. We can use external CDN loading to introduce components from CDN and remove them.
The components of other pages are imported, modified, and added to externals. This is to avoid errors caused by component failure during compilation.
//This is the configuration in my project//Remember that it is only suitable for testing. If it is online, it must be purchased and paid.<link rel="stylesheet" href="/npm/[email protected]/lib/" /> <script src="/npm/[email protected]/lib/"></script>
3. Lazy loading of vue-router routes
This is a very important step, which will greatly reduce the volume after packaging and increase the loading speed
It is correct to load the corresponding routes and resources only when you access the relevant page. Otherwise, it will be loaded when you initialize the project, and the first screen will be long.
Give an example:
Lazy loading mode configuration
let routes = [
{
path: '/map', //map name: 'map',
component: resovle => require(['@/pages/map'],resovle),
meta: { noRequiresAuth: true },
},
{
path: '/redirectLogin', //Payback jump name: 'redirectLogin',
component: resovle => require(['@/pages/site/redirectLogin'],resovle),
meta: { noRequiresAuth: true },
}
]Non-----Lazy Load Mode Configuration Configuration
import Vue from 'vue'; //This sentence can be deleted directly because externals are configured//import Router from 'vue-router';
//import login from '@/pages/site/login';
userequireMethod substitutionimport
const Router = require('vue-router');
const login = require('@/pages/site/login');
(Router);
let routes = [
{
path: '/login', //Login name: 'login',
component: login,
meta: { noRequiresAuth: true },
},
]4. Static resource compression, code compression, picture compression
(1) Turn on gzip compression (this requires the cooperation of the server)
It is really important to enable gzip compression and cooperate with the server to open it. After turning on gzip, you will find that the loading speed has been qualitatively improved, especially when yours and the volume is too large.
(2) Image compression. I am currently using Alibaba Cloud's image processing (paid) effect, or if conditions permit, configure a separate image server.
(3) Try to use icon instead of pictures
(4) JS code compression - - - (webpack compresses js files from UglifyJsPlugin plugin)
(5) CSS code compression - - - - (Use optimize-css-assets-webpack-plugin plugin to compress css code)
5. Don't abuse the three-party library
Try to use only one library for one project, and do not ignore performance in order to facilitate the use of multiple libraries.
6. Remove the compiled map file
In order to avoid the deployment of packaging volume too large, we usually remove the source file (that is, the source code cannot be seen after packaging), and the packaged volume will be much smaller, in the file under the config folder
= {
build: {
env: build_env,
index: (__dirname, '../dist/'),
assetsRoot: (__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
productionSourceMap: false, // Setting this to false is to remove the source file // Gzip off by default as many popular static hosts such as Surge or Netlify
// already gzip all static assets for you. Before setting to `true`, make sure
// to: npm install --save-dev compression-webpack-plugin
productionGzip: true, //Open gzip productionGzipExtensions: [
'js', 'css'
],
// Run the build command with an extra argument to View the bundle analyzer
// report after build finishes: `npm run build --report` Set to `true` or
// `false` to always turn it on or off
bundleAnalyzerReport: .npm_config_report
},
}7. Code-level optimization
(1) Project componentization, remove redundant code
(2) Remove the formal environment
(3) Place the js file at the bottom of the page in the page, and place the css file in <header> and use link to introduce it.
The reason for this is that the browser rendering mechanism is top-down. If you put the js file in the head and then start drawing the page after the js file is rendered, the speed will be very slow and will be blocked by css rendering. Therefore, you need to put the js file at the bottom, and some unrelated files can be loaded asynchronously.
4. Solve white screens and optimize experience
The above has already discussed the optimization problem. After all the optimizations are completed, the loading speed has been significantly improved. After all the optimizations are completed, the loading speed has been significantly improved. After all the optimizations are completed, the loading speed has been significantly improved. However, when the network is slow, there will still be a white screen, so it is particularly important to add a skeleton screen and loading during the white screen.
<body> //The test is effective here, please feel free to use <div > // We only need to add loading pictures or skeleton screen here. Some people will say how to control its display and hide it. //Don't worry, the project initialization will be automatically replaced with your page. <div class="self-loading"> The page is coming quickly，Please wait </div> </div> </body>
The above is personal experience. I hope you can give you a reference and I hope you can support me more.