Shulou(Shulou.com)06/03 Report--

Editor to share with you how to achieve the skeleton screen based on vue-skeleton-webpack-plugin, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's learn about it!

First, put up the effect picture:

What is a skeleton screen?

Skeleton screen, English Skeleton screen, refers to the white screen time before the page starts rendering, first let the user see the "skeleton" of the page to be displayed, and then replace it after the page rendering is completed, playing a transitional role from the white screen → rendering process, it can effectively reduce the user's perception time, so that users "feel" that opening the page is faster (compared to the complete white screen time).

Realize

This paper mainly focuses on an open source Webpack plug-in vue-skeleton-webpack-plugin to add the skeleton screen to the Vue project.

Due to the different requirements of the project for the skeleton screen, the corresponding code will be different. The skeleton screen implemented in this paper is a project based on Vue-cli 3.x, which displays different skeleton screens according to different routes. For other usage, please see the open source plug-in.

Let's get started: surfer:.

The first is to install the plug-in:

Npm install vue-skeleton-webpack-plugin

Vue.config.js

After the installation is complete, make the following configuration in vue.config.js:

Const SkeletonWebpackPlugin = require ('vue-skeleton-webpack-plugin') module.exports = {configureWebpack: (config) = > {config.plugins.push ({webpackConfig: {entry: {app: path.join (_ dirname,'. / src/skeleton/skeleton.js')}}, / / SPA is the JS code minimize: true that is compressed and injected into HTML, / / whether the server needs to output information to the console quiet: true when rendering / / display the skeleton screen router: {mode: 'history', routes: [{path:' /', skeletonId: 'skeleton-home'}, {path:' / message', skeletonId: 'skeleton-message'}]}, css: {/ / use css to separate the plug-in mini-css-extract-plugin Otherwise, the skeleton screen components will not work, extract: true,}}

Skeleton.js is the entrance to our skeleton screen, which we will create later. Let's take a look at the configuration item router.

The configuration of router determines the skeleton screen corresponding to each routing path.

Router.mode enter routing mode. Two values can be history | hash.

Router.routes fills in the routing array, where path corresponds to the path of the page in vue-router, and skeletonId is the id of the skeleton screen, which will be explained later.

Skeleton.js

After the configuration is complete, create a new entry skeleton.js for the skeleton screen.

/ / src/skeleton/skeleton.jsimport Vue from 'vue'// introduced skeleton screen component import skeletonHome from'. / skeleton/skeletonHome.vue'import skeletonMessage from'. / skeleton/skeletonMessage.vue'export default new Vue ({components: {skeletonHome, skeletonMessage,}, template: ``})

In the above code, the two components introduced correspond to the skeleton screens of the home page (Home) and the message page (Message), respectively, where the id of the component corresponds to the previous skeletonId in the vue.config.js.

Paste the code for one of the skeleton screen components:

/ / skeletonMessage.vue import messageItem from'. / components/s-messageListItem'export default {name: 'skeletonMessage', components: {' color messageItemps: messageItem}}. Skeleton-block {width:100%; height: 100vh;} .sk-loanList-header-bg {height:88px; background:#2954D0;}

In fact, it is a very common Vue component, in which you can write the style of the skeleton screen you want, and the reusable parts can be subdivided into components. Add skeletonMessage to the route to see the effect:

At this point, now that the skeleton screen is ready, is it very simple?

Effect display

To simulate the mobile access environment, go to Performance in Chrome DevTools to set it.

Run Performance:

Effect:

There is still a flash in the process of replacing the skeleton screen with a page. I don't know whether this can be optimized or not.

Take a look at the display time of different pages in Performance:

(ps: explain, I don't know what's going on. After running it, it's Ni: horse: so paste.)

You can see that in the case of local run access (local access is faster), the 221ms page first displays the skeleton screen after entering the page, and then completes the rendering of the page when 738ms.

This is the white screen time of 738ms without the skeleton screen, and we have optimized some white screen time through the skeleton screen: surfer:.

Last

Vue-skeleton-webpack-plugin is a relatively elementary skeleton screen scheme, and I believe you can think of many disadvantages right away.

For example:

You need to write the style of the skeleton screen manually.

The response problem of skeleton screen style in different sizes.

After the interface changes, you also need to manually modify the corresponding skeleton screen.

Due to the use of postcss-px2rem automatic px to rem in my project, I avoid some shortcomings.

Other methods

There are also many ways to use a skeleton screen:

Page-skeleton-webpack-plugin ele.me open source automatically generate skeleton screen generation plug-in.

Use the picture of base64 to make the skeleton screen, and let UI draw the skeleton screen by the way when publishing the design draft.

The above is all the contents of the article "how to implement a skeleton screen based on vue-skeleton-webpack-plugin". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.