Summary of vue project optimization methods

This time I will bring you a summary of vue project optimization methods. What are the precautions for vue project optimization? The following is a practical case, let’s take a look.

Image optimization

1. Image size optimization, some images use WebP (webp compatibility needs to be considered)

1. Online Generate, such as Zhitu and Youpaiyun

2. gulp generation, gulp-webp or gulp-imageisux

3. canvas generation

2. Reduce image requests and use sprite images

1. to generate online: sprites Generator, Tencent’s gopng, spriteme

2. Code generation: gulp.spritesmith or sass compass

PagePerformance Optimization

Lazy loading of images or components

Use vue-lazyload component or some other component

vue-lazyload address: https://www.npmjs.com/package/vue-lazyload

Image lazy loading: v-lazy or use v-lazy-container to contain a picture group

// 引入一张图片 
<img  src="/static/imghwm/default1.png" data-src="//domain.com/img1.jpg" class="lazy" alt="Summary of vue project optimization methods" > 
// 引入一组图片
<p>
 <img  src="/static/imghwm/default1.png" data-src="//domain.com/img1.jpg" class="lazy" alt="Summary of vue project optimization methods" >
 <img  src="/static/imghwm/default1.png" data-src="//domain.com/img2.jpg" class="lazy" alt="Summary of vue project optimization methods" >
 <img  src="/static/imghwm/default1.png" data-src="//domain.com/img3.jpg" class="lazy" alt="Summary of vue project optimization methods" > 
</p>

Component lazy loading

Vue.use(VueLazyload, {
 lazyComponent: true
});
<lazy-component>
 <img  class="mini-cover lazy" src="/static/imghwm/default1.png" data-src="img.src" alt="Summary of vue project optimization methods" >
</lazy-component>

Image preloading

Quickly display pictures

Usage scenario: In a component that views pictures, when constantly flipping through the pictures on the next page, getting data from the server and then displaying the pictures will cause the pictures to load slowly. In this case When displaying new data, you can preload the image first. After the image is loaded, fill the image into the corresponding position

Three-party plug-in lazy loading (loading on demand)

js files are generally loaded synchronously, and placing them in the page will block the loading of the main js files.

Usage scenarios: When some projects must introduce files such as jquery, introducing these files inside the component will block page rendering to a certain extent, so it is dynamically loaded through specific events (click or pop-up window) JS files such as jquery can quickly display the main page.

Asynchronous loading of pages, how to prevent components from overlapping

When multiple vue components are loaded and the components are rendered through server-side data, multiple components will first overlap and then separate. Situation

Three options

• #When the section displayed on the page is fixed and the height of the content is not easy to change, it can be set outside the component in advance A fixed height that displays like adding content to a frame. When the page content is not fixed, in order to reduce the problem of overlapping components during asynchronous loading, you can set other components to be displayed on the first screen when the data of a certain component is loaded, and displayed 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 to http://www.jb51.net/article/130505.htm

• Server-side rendering page. For some pages with fixed data and few changes, you can consider passing Server-side rendering will display the page in a short time, providing a better user experience.

Reduce the size of imported external files

When the project introduces some ElementUI content, configure the .babelrc file by introducing babel-plugin-component, so that Partial components can be introduced to reduce the size of the component.

Routing lazy loading

But when using vue-router, webpack will package all components in a js file, which will cause the file to be very large, thus It will affect the loading of the homepage. The best way is to package other routes into different js files, and then load the corresponding js files when switching routes.

resolve => require([URL], resolve), good support

() => system.import(URL), already available on webpack2 official website The statement will be gradually abolished. It is not recommended to use

() => import(URL). It is recommended by the webpack2 official website. It belongs to the es7 category and needs to be used with babel’s syntax-dynamic-import plug-in.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Summary of three ways to dynamically load JS files

Summary of cross-domain methods for js to support post requests

The above is the detailed content of Summary of vue project optimization methods. For more information, please follow other related articles on the PHP Chinese website!