This time I will bring you a detailed explanation of the steps to optimize the vue project, and what are the precautions for optimizing the vue project. The following is a practical case, let's take a look.
PicturesOptimization
1. Picture size optimization, some pictures use WebP (webp compatibility needs to be considered)
Online generation, such as Zhitu and Youpaiyun
gulp generation, gulp-webp or gulp-imageisux
canvas Generate
2. Reduce image requests and use sprite images
to generate online: sprites Generator, Tencent’s gopng, spriteme
Code generation: gulp.spritesmith or sass compass
##PagePerformance optimization
Lazy loading of images or componentsUse vue-lazyload component or some other componentsvue-lazyload address:https://www.npmjs.com/package/vue -lazyload
Picture lazy loading: v-lazy or use v-lazy-container to contain a picture group// 引入一张图片 <img v-lazy="//domain.com/img1.jpg"> // 引入一组图片 <p v-lazy-container="{ selector: 'img', error: 'xxx.jpg', loading: 'xxx.jpg' }"> <img src="//domain.com/img1.jpg"> <img src="//domain.com/img2.jpg"> <img src="//domain.com/img3.jpg"> </p>
Vue.use(VueLazyload, { lazyComponent: true }); <lazy-component> <img class="mini-cover" :src="img.src" width="100%" height="400"> </lazy-component>
Picture preloading
Quickly display picturesUsage scenario: In a component that views pictures, when constantly flipping through the pictures on the next page, the picture will appear after getting the data from the server and then displaying the picture. In the case of slow loading, you can preload the image when displaying new data. After the image is loaded, fill the image into the corresponding positionThree-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 specificevents (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 overlappingWhen multiple vue components are loaded and the components are rendered through server-side data, multiple components will first overlap and then separate. SituationThree options
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:react-navigation use case analysis
React Navigation use case analysis
The above is the detailed content of Detailed explanation of steps to optimize Vue project. For more information, please follow other related articles on the PHP Chinese website!