Skeleton screens can be understood as the current data has not been loaded in, a blank version of the page, a simple rendering of critical path. Users will see a simple style, depicts the skeleton screen page general framework of the current page, then each occupying part of the screen skeleton is completely replaced by the actual resource, the user will feel the process is gradually loaded content coming soon, reducing the user restlessness, making the loading process is subjective becomes smooth.

installation

Used here hungry, it's open-source program page-skeleton-webpack-plugin.

npm install --save-dev page-skeleton-webpack-plugin
npm install --save-dev html-webpack-plugin
复制代码

Given installation process suggest the following

ERROR: Failed to download Chromium r515411! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOA
D" env variable to skip download.
复制代码

Execute this command

npm config set puppeteer_download_host=https://storage.googleapis.com.cnpmjs.org
复制代码

use

This project is based on my vue-cli3scaffolding development.

The first step in configuring the plug

Create a vue.config.jsfile.

const { SkeletonPlugin } = require('page-skeleton-webpack-plugin')
const path = require('path')

module.exports = {
  configureWebpack: {
    plugins: [
      new SkeletonPlugin({
        pathname: path.resolve(__dirname, './shell'), // 用来存储 shell 文件的地址
        staticDir: path.resolve(__dirname, './dist'), // 最好和 `output.path` 相同
        routes: ['/'], // 将需要生成骨架屏的路由添加到数组中
        excludes: ['.van-nav-bar', '.van-tabbar']  // 需要忽略的css选择器
      })
    ],
  },
  chainWebpack: (config) => {   // 解决vue-cli3脚手架创建的项目压缩html 干掉<!-- shell -->导致骨架屏不生效
    if (process.env.NODE_ENV !== 'development') {
      config.plugin('html').tap(opts => {
        opts[0].minify.removeComments = false
        return opts
      })
    }
    
  },
};
复制代码

Create a project in the root directory of the following shellfolder. chainWebpack this configuration is to solve the vue-cli3BUG packaged skeleton of the screen does not take effect

The second step to modify the template HTML Webpack Plugin plugin

Add in the interior of the root element you start App

<body>
  <div id="app"><!-- shell --></div>
  <!-- built files will be auto injected -->
</body>
复制代码

The third step: generating interface operation, the write page skeleton

In the development of the page by Ctrl | Cmd + enter exhaled plug-in interface, or exhaled input in the browser's JavaScript console toggleBar interface.
Click the button interactive interface, preview skeleton of the page, this process may take time around 20s, when the plug-page skeleton is ready, it will automatically open the preview page with a browser
Scan preview page two-dimensional code, you can preview the phone side skeleton page, you can edit the source code directly in the preview page, written by the top right button click, the page will be written to the skeleton shell folder.
Repackaging applications by webpack, when the page is re-started, you can get to see the skeleton structure of the data before the application.