preface

Currently doing the project, login is the need to jump to other people’s page, resulting in a lot of redirection, need to optimize the white screen time, so I used the skeleton screen, but this time with the skeleton screen is not automatically generated, or their own style, step by step, first from the simple use of 🤝.

First, the effect picture:

What is a skeleton screen

Skeleton screen (English Skeleton screen) refers to the “Skeleton” of the page to be displayed during the white screen time before the page starts rendering, and then it is replaced after the page rendering is completed. It plays a transitional role from the white screen to the rendering completion process, which can effectively reduce the user’s perception time. Make the page “feel” faster (compared to a full white screen).

implementation

This article mainly focuses on an open source Webpack plug-in, vue-skeleton-webpack-plugin, to realize the addition of skeleton screen in vue project.

Depending on your project’s requirements for skeleton screens, the corresponding code will vary. The skeleton screen implemented in this paper is a project built on vuE-CLI 3.x. Different skeleton screens are displayed according to different routes. For other uses, please refer to open source plug-ins.

Let’s get started 🏄.

First, install the plug-in:

npm install vue-skeleton-webpack-plugin
Copy the code

vue.config.js

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

const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')
module.exports = {
    configureWebpack: (config) => {
        config.plugins.push(new SkeletonWebpackPlugin({
            webpackConfig: {
                entry: {
                    app: path.join(__dirname, './src/skeleton/skeleton.js'}}, // SPA is a compression of javascript code that can be injected into HTML to minimize:true// Whether the server needs to output information to the console during renderingtrueRouter: {mode:'history',
                    routes: [
                        {
                            path: '/',
                            skeletonId: 'skeleton-home'
                        },
                        {
                            path: '/message',
                            skeletonId: 'skeleton-message'}]}}}, CSS: {// Use CSS to extract extract, extract, extract, extract, extract;true,}}Copy the code

Where skeleton.js is the entry point to our skeleton screen, which we will create later. Take a look at the router configuration item.

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

  • The router mode fill routing model, two values optional history | hash.
  • Router. routes Populate the routing array, where Path corresponds to the path of the page in vue-router. SkeletonId is the skeleton screen ID, as we’ll explain later.

skeleton.js

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

// src/skeleton/skeleton.js
import Vue from 'vue'// Import skeletonHome from'./skeleton/skeletonHome.vue'
import skeletonMessage from './skeleton/skeletonMessage.vue'

export default new Vue({
    components: {
        skeletonHome,
        skeletonMessage,
    },
    template: `
        <div>
            <skeletonHome id="skeleton-home" style="display:none"/>
            <skeletonMessage id="skeleton-message" style="display:none"/>
        </div>
    `
})
Copy the code

The two components introduced in the above code correspond to the skeleton screens of the Home and Message pages, and the component ids correspond to those in the vue.config.js skeletonId.

Paste the code for one of the skeleton screen components:

// skeletonMessage.vue
<template>
    <div class="skeleton-block">
      <div class="sk-loanList-header-bg"></div>
      <s-messageItem/>
      <s-messageItem/>
      <s-messageItem/>
      <s-messageItem/>
    </div>
</template>

<script>
import messageItem from './components/s-messageListItem'
export default {
    name: 'skeletonMessage',
    components: {
        's-messageItem': messageItem
    }
}
</script>

<style scoped>
.skeleton-block {
    width:100%;
    height: 100vh;
}
.sk-loanList-header-bg {
    height:88px;
    background:#2954D0;
}
</style>
Copy the code

In fact, it is a very common Vue component, in the component to write the skeleton screen style you want, reusable place can also be divided into components. Add the skeletonMessage to the route and let’s see what happens:

So far, now skeleton screen has been ready, is not very simple 🤨.

Results show

To simulate the mobile access environment, enter Performance in Chrome DevTools.

Effect:

There is still a flash in the process of replacing the skeleton screen with a page, I don’t know if this can be optimized yet, we are trying.

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

(PS: explain, I also do not know what the situation, after running is ni 🐴 so paste…)

It can be seen that in the case of local access (local access is faster), the skeleton screen is first displayed in 221ms after entering the page, and then the page rendering is completed in 738ms.

Here, if the skeleton screen is not added, the white screen time is 738ms. We have optimized some white screen time through the skeleton screen 🏄.

The last

Vue-skeleton-webpack-plugin is a relatively basic skeleton screen solution, I believe you can also immediately think of many shortcomings.

Such as:

  • You need to write the skeleton screen style manually.
  • Response problem of skeleton screen style under different sizes.
  • After interface changes, you need to manually modify the corresponding skeleton screen.

Because I use postCSS-Px2REM to automatically convert PX to REM in my project, I avoid some disadvantages.

Other methods

There are many other ways to use skeleton screens:

  • Page -skeleton-webpack-plugin Is an open source plugin for automatically generating skeleton screens.
  • Base64 pictures do skeleton screen, let UI in the design draft incidentally skeleton screen also to draw 😂.

Reference: juejin. Cn/post / 684490…