One sentence summary:
The reason I encountered was instability caused by using a free CDN. Solution: Download the original CDN resources and put them on the website server, and change the website source files to include local resources on the server.
Some reasons and solutions for why the first rendering of the Vue website is very slow:
- Lazy loading of routes
Using routing lazy loading can avoid loading too many resources at once, which is a good optimization method.
- Remove redundant map files from the package file
- Whether to use CDN to introduce third-party libraries
This is a double-edged sword. Sometimes the use of free CDN or paid CDN with average quality actually causes slow website access. There is a guideline: if your website is not large in scale and cannot find a high-quality and stable CDN, just upload the resources that need to be included to the server and include them directly in the Vue file.If you can find a stable and high-quality CDN, then using a CDN will allow users to have a uniform and great access experience in the entire region.
- Configure the website server to gzip package during transmission
- prerender
- Optimize webpack to reduce module packaging size, code-split loads on demand
- Server-side rendering, assemble the html required for the home page in advance on the server side
- Add loading or skeleton screen to the homepage (just to optimize the experience)
