How to implement a single page skeleton screen in Vue

This article mainly introduces you to the relevant information about the practice of Vue single page skeleton screen. The article introduces it in detail through the example code. It has certain reference learning value for everyone to learn or use Vue. Friends who need it can come below Let’s take a look.

About the skeleton screen introduction

The main function of the skeleton screen is to provide basic placeholders when the network request is slow. When the data loading is completed , restore data display. This gives users a natural transition and will not cause the page to be blank or flickering for a long time. Common skeleton screen implementation solutions include SSR server-side rendering and prerender.

Here we mainly use the code to show you how to make such a skeleton screen step by step:

##prerender rendering skeleton screen

The implementation of the skeleton screen of this component library is also based on pre-rendering. For a more detailed introduction to pre-rendering, please refer to this article: Another way to deal with Vue single-page Meta SEO Below we mainly introduce the implementation steps. First, we also need to configure the webpack-plugin, but there is already an implemented prerender-spa-plugin available

var path = require('path')
var PrerenderSpaPlugin = require('prerender-spa-plugin')
module.exports = {
 // ...
 plugins: [
 new PrerenderSpaPlugin(
 // Absolute path to compiled SPA
 path.join(__dirname, '../dist'),
 // List of routes to prerender
 ['/']
 )
 ]
}

Then write our skeleton screen file main.skeleton.vue

 <template>
 <p class="main-skeleton">
 <w-skeleton height="80px"></w-skeleton>
 <p>
 <p class="skeleton-container">
 <p class="skeleton">
  <w-skeleton height="300px"></w-skeleton>
 </p>
 <w-skeleton height="45px"></w-skeleton>
 </p>
 <p class="skeleton-bottom">
 <w-skeleton height="45px"></w-skeleton>
 </p>
 </p>
 </p>
</template>

When entering the page for the first time, we need to display the skeleton screen. After the data is loaded, we need to remove the skeleton screen:

 <template>
 <p id="app">
 <mainSkeleton v-if="!init"></mainSkeleton>
 <p v-else>
 <p class="body"></p>
 </p>
 </p>
</template>
<script>
 import mainSkeleton from &#39;./main.skeleton.vue&#39;
 export default {
 name: &#39;app&#39;,
 data () {
 return {
 init: false
 }
 },
 mounted () {
 // 这里模拟数据请求
 setTimeout(() => {
 this.init = true
 }, 250)
 },
 components: {
 mainSkeleton
 }
 }
</script>

ssr rendering skeleton screen

Below I use the brushwork of my soul painter to draw the general process:

First create our skeleton.entry.js

import Vue from 'vue';
import Skeleton from './skeleton.vue';
export default new Vue({
 components: {
 Skeleton
 },
 template: &#39;<skeleton />&#39;
});

Of course, the skeleton.vue here makes the skeleton screen component we wrote in advance, which may look like this:

 <template>
 <p class="skeleton-wrapper">
 <header class="skeleton-header"></header>
 <p class="skeleton-block"></p>
 </p>
</template>

Then what we need is to compile skeleton.entry.js into the server Render the available bundle files, so we need to have a webpack.ssr.conf.js file that compiles the skeleton screen:

const path = require('path');
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');
const nodeExternals = require('webpack-node-externals');
function resolve(dir) {
 return path.join(__dirname, dir);
}
module.exports = merge(baseWebpackConfig, {
 target: 'node',
 devtool: false,
 entry: {
 app: resolve('./src/skeleton.entry.js')
 },
 output: Object.assign({}, baseWebpackConfig.output, {
 libraryTarget: 'commonjs2'
 }),
 externals: nodeExternals({
 whitelist: /\.css$/
 }),
 plugins: []
});

The next final step is to write our webpackPlugin. We hope that our webpackPlugin can help We compile the entry file into a bundle, then render the bundle through vue-server-renderer, and finally produce the response html fragment and css fragment. The core code is posted here:

 // webpack start to work
 var serverCompiler = webpack(serverWebpackConfig);
 var mfs = new MFS();
 // output to mfs
 serverCompiler.outputFileSystem = mfs;
 serverCompiler.watch({}, function (err, stats) {

 if (err) {
  reject(err);
  return;
 }
 stats = stats.toJson();
 stats.errors.forEach(function (err) {
  console.error(err);
 });
 stats.warnings.forEach(function (err) {
  console.warn(err);
 });
 var bundle = mfs.readFileSync(outputPath, 'utf-8');
 var skeletonCss = mfs.readFileSync(outputCssPath, 'utf-8');
 // create renderer with bundle
 var renderer = createBundleRenderer(bundle);
 // use vue ssr to render skeleton
 renderer.renderToString({}, function (err, skeletonHtml) {
  if (err) {
  reject(err);
  }
  else {
  resolve({skeletonHtml: skeletonHtml, skeletonCss: skeletonCss});
  }
 });
 });

In the last step, we The html fragments and css fragments are assembled to produce the final html, so we need to monitor the events before webpack is compiled and mounted:

compiler.plugin('compilation', function (compilation) {
 // add listener for html-webpack-plugin
 compilation.plugin('html-webpack-plugin-before-html-processing', function (htmlPluginData, callback) {
 ssr(webpackConfig).then(function (ref) {
  var skeletonHtml = ref.skeletonHtml;
  var skeletonCss = ref.skeletonCss;
  // insert inlined styles into html
  var headTagEndPos = htmlPluginData.html.lastIndexOf(&#39;</head>&#39;);
  htmlPluginData.html = insertAt(htmlPluginData.html, ("<style>" + skeletonCss + "</style>"), headTagEndPos);

  // replace mounted point with ssr result in html
  var appPos = htmlPluginData.html.lastIndexOf(insertAfter) + insertAfter.length;
  htmlPluginData.html = insertAt(htmlPluginData.html, skeletonHtml, appPos);
  callback(null, htmlPluginData);
 });
 });
 });

github address: VV-UI/VV-UI

Demo address: vv-ui

Document address: skeleton

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed answers to Webpack Babel React environment construction (detailed tutorial)

Detailed introduction to the relevant configuration of scss in webpack

Project component development in Vue (detailed tutorial)

How to implement webpack multi-entry file packaging configuration

How to implement multiple inheritance in JavaScript

The above is the detailed content of How to implement a single page skeleton screen in Vue. For more information, please follow other related articles on the PHP Chinese website!