Vue project package file is too large

Posted Jun 16, 20202 min read

Question
The package file of the Vue project is too large, and the project is slow to load. What optimization can be done on the front end?

Analysis
In fact, this is the performance optimization of the project. Generally, it should be considered before the project starts development, but in actual development, it will be ignored before development.

The solution is as follows

1. Lazy loading

What is lazy loading? Load when you need it, use it with the load.
Common ones are:routing, pictures, etc.
Examples:
Official routing lazy loading

{
    path:"/timeAxis",
    name:"timeAxis",
    component:() =>
        import('@/views/xxx'),
}

Second, load on demand

What is on-demand loading? Load resources as needed.
Common ones are:UI library, etc.

3. Do not generate .map files

The productionSourceMap setting in the configuration becomes false, which can reduce the volume by almost half.

4. Introduction through CDN

Introduce the third-party package that will not change much through the