Image optimization
1. Optimize the image size, use WebP for some images (webp compatibility needs to be considered)
- Generate online, such as Zhitu and Shooting Cloud
- gulp generation, gulp-webp or gulp-imageisux
- canvas generation
2. Reduce image requests and use Sprite pictures
- Online generation: sprites Generator, Tencent's gopng, spriteme
- Code generation: or sass compass
Page performance optimization
Lazy loading of pictures or components
Use vue-lazyload component or some other component
vue-lazyload address:/package/vue-lazyload
Image lazy loading: v-lazy or use v-lazy-container to include an image group
// Introduce a picture<img v-lazy="///">
// Introduce a set of pictures<div v-lazy-container="{ selector: 'img', error: '', loading: '' }">
<img data-src="///">
<img data-src="///">
<img data-src="///">
</div>
Lazy component loading
(VueLazyload, {
lazyComponent: true
});
<lazy-component>
<img class="mini-cover" :src="" width="100%" height="400">
</lazy-component>
Image preload
Quickly display pictures
Usage scenario: In a component that views the picture, when constantly looking at the picture on the next page, obtaining data from the server and then displaying the picture will cause the picture to load slowly. At this time, you can preload the picture first when displaying new data. After the picture is loaded, fill the picture to the corresponding position.
Lazy loading of three-party plug-ins (loading on demand)
JS files are usually loaded synchronously, and putting them on the page will block the loading of the main js files.
Usage scenario: When some projects must introduce jquery and other files, introducing these files inside the component will block page rendering to a certain extent. Therefore, dynamically loading jquery and other JS files through specific events (clicks or pop-ups), which can make the main page quickly display.
Asynchronously loading pages, how to prevent components from overlapping
When multiple vue components are loaded and the components are rendered through server data, multiple components will first overlap and then separate.
Three solutions
- When the section displayed on the page is fixed and the content height is not easy to change, you can set a fixed height outside the component in advance, and when displayed, it is like adding content in a frame. When the page content is not fixed, in order to reduce the problem of component overlap during asynchronous loading, you can set other components to display when a certain component data is loaded on the first screen, and display it through v-show.
- When the page is fixed as a whole, you can add a skeleton to the page to prevent the page from flickering. For specific implementation, please refer tohttps:///article/
- For some pages that are rendered on the server side, for some pages that have fixed data and fewer changes, you can consider rendering through the server side, which will display the page in a short time, giving you a better user experience.
Reduce the size of imported external files
When introducing some ElementUI content in the project, the babel-plugin-component configuration.babelrc file can be introduced, thereby reducing the size of the component.
Lazy route loading
However, when using vue-router, webpack will package all components in a js file, which will cause the file to be very large, which will affect the loading of the homepage. The best way is to package other routes into different js files separately, and then load the corresponding js file when switching routes.
resolve => require([URL], resolve), good support
() => (URL), the official website of webpack2 has stated that it will be gradually abolished, and it is not recommended to use it
() => import(URL), recommended to use on the official website of webpack2, belongs to the es7 category, needs to be used with babel's syntax-dynamic-import plug-in
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.