1. Add a progress bar through nprogress. Add
Nprogress.start() to
the axios interceptor request and Nprogress.done() to the axios interceptor response.
2. Define Node_ENV in chain in vue.config.js to divide into two js files for production/development
3. Load external CDN resources through externals
, delete import in index.js and introduce link CDN resources in index.html
4, picture lazy loading
img tag when loading pictures is by requesting src attribute points to a file to add
upload pictures, that if the img tag does not have the src attribute, then the img tag when rendering, it will not load Image. So the principle of lazy loading of images is to temporarily change the src attribute of the img tag to a custom attribute, so that the page is
loaded and the image will not be loaded. When the area where the img tag is located enters the visible area of the screen, start from The
image address is obtained from the custom attribute of the stored image path and dynamically set to
the src attribute of the corresponding img tag, so that the browser will automatically help us to request the corresponding image
resource, which also realizes the so-called lazy loading of images. There are many lazy-loaded plugins, most
of which are based on jquery, such as jquery.lazyload.Of course, there are also
plugins that implement lazy loading of images in vue, such as vue-lazyload, and vue's component library also has
image lazy-loaded components.
5. Routing lazy loading
Routing lazy loading refers to loading the corresponding routing components in an asynchronous manner (the default is
to load and package all components).
The benefits of routing lazy loading: it can improve the loading speed of the page, especially the home page The loading speed
(because after using lazy loading, when loading the home page, there is no need to load
the components corresponding to other pages , and then load them when needed)
6. Third-party plug-ins are inserted on demand