vue-skeleton-webpack-plugin搭建骨架屏，以及nprogress优化用户体验

2024-02-17 14:05:40

最近在优化手里面项目，发现项目首页加载实在很慢，第一次加载白屏显示时间很长，用户体验极差，所以自己鼓捣加个骨架屏和加载滚动进度条试试。

使用vue-skeleton-webpack-plugin、nprogress搭建骨架屏

首先安装插件

npm install --save nprogress
npm i vue-skeleton-webpack-plugin

对于nprogress其他使用属性，可以在链接查看；在项目中使用方法，在route里面加入钩子函数或者在main.js也可以，这样在页面加载刷新时可以起到用户视觉上的友好展示：

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

router.beforeEach((to, from, next) => {
  NProgress.start()
  next()
})

router.afterEach(() => {
  NProgress.done()
})

在使用vue-skeleton-webpack-plugin插件的时候，我的项目是vue-cli2，所以和vue-cli3目录结构不太相同，但是大致都是一样套路的；

首页在build里面创建一个webpack.skeleton.conf.js文件，主要配置的是vue-skeleton-webpack-plugin里面的内容

'use strict';
 
const path = require('path')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const nodeExternals = require('webpack-node-externals')
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
var ExtractTextPlugin = require("extract-text-webpack-plugin")
const sourceMapEnabled = isProduction
  ? config.build.productionSourceMap
  : config.dev.cssSourceMap
 
function resolve(dir) {
  return path.join(__dirname, dir)
}
 
let skeletonWebpackConfig = merge(baseWebpackConfig, {
  target: 'node',
  devtool: false,
  entry: {
    app: resolve('../src/entry-skeleton.js')
  },
  output: Object.assign({}, baseWebpackConfig.output, {
    libraryTarget: 'commonjs2'
  }),
  externals: nodeExternals({
    whitelist: /\.css$/
  }),
  plugins: [
    new ExtractTextPlugin("App.css")
  ]
})
 
// important: enable extract-text-webpack-plugin  
/* skeletonWebpackConfig.module.rules[0].options.loaders = utils.cssLoaders({
  sourceMap: sourceMapEnabled,
  extract: true
}), */
 
module.exports = skeletonWebpackConfig

然后在webpack.dev.conf.js和webpack.prod.conf.js引入上面的配置vue-skeleton-webpack-plugin

plugins:[
      new SkeletonWebpackPlugin({
      
          webpackConfig: require('./webpack.skeleton.conf'),
          quiet: true,
          minimize: true,
          //如果不设置router则所有页面共享一个骨架屏
          router: {
                mode: 'history',
                routes: [] //给对应的路由设置对应的骨架屏组件，skeletonId的值根据组件设置的id
          } 

      })
]

在src文件夹下面新建一个entry-skeleton.js和skeleton.vue

import Vue from 'vue'
// 创建的骨架屏 Vue 实例
import skeleton from './skeleton';
export default new Vue({
    components: {
        skeleton
    },
    template: '<skeleton />'
});

<template>
    <div>
        <div class="skeleton">
            <div class="skeleton-head"></div>
            <div class="skeleton-body">
                <div class="skeleton-name"></div>
                <div class="skeleton-title"></div>
                <div class="skeleton-content"></div>
            </div>
        </div>
        <div class="skeleton">
            <div class="skeleton-head"></div>
            <div class="skeleton-body">
                <div class="skeleton-name"></div>
                <div class="skeleton-title"></div>
                <div class="skeleton-content"></div>
            </div>
        </div>
        <div class="skeleton">
            <div class="skeleton-head"></div>
            <div class="skeleton-body">
                <div class="skeleton-name"></div>
                <div class="skeleton-title"></div>
                <div class="skeleton-content"></div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'skeleton'
    };
</script>

<style scoped>
    .skeleton {
        padding: 15px;
    }
    .skeleton .skeleton-head,
    .skeleton .skeleton-name,
    .skeleton .skeleton-title,
    .skeleton .skeleton-content,
    .skeleton .skeleton-content {
        background: rgb(194, 207, 214);
    }
    .skeleton-head {
        width: 33px;
        height: 33px;
        border-radius: 50%;
        float: left;
    }
    .skeleton-body {
        margin-left: 50px;
    }
    .skeleton-name{
        width: 150px;
        height: 30px;
        margin-bottom: 10px;
    }
    .skeleton-title {
        width: 100%;
        height: 30px;
    }
    .skeleton-content {
        width: 100%;
        height: 30px;
        margin-top: 10px;
    }
</style>

然而这样运行还是不可以的，导致skeleton.vue里面的样式无法生效，所以还得配置一下extract-text-webpack-plugin进行样式分离；

因为我的页面一直报错，我使用的是webpack3：

所以重新安装了一下extract-text-webpack-plugin，

# for webpack 3
npm install --save-dev extract-text-webpack-plugin
# for webpack 2
npm install --save-dev extract-text-webpack-plugin@2.1.2
# for webpack 1
npm install --save-dev extract-text-webpack-plugin@1.0.1

然后在webpack.base.conf.js进行页面样式分离设置：

const ExtractTextPlugin = require("extract-text-webpack-plugin")

module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        //options: vueLoaderConfig
        options: {
          loaders: {
            scss: ExtractTextPlugin.extract({ fallback: 'vue-style-loader', use: 'css-loader!sass-loader' }),
            css: ExtractTextPlugin.extract({ fallback: 'vue-style-loader', use: 'css-loader' }),
          }
        }
      }
    ]
  },
  plugins: [
      new ExtractTextPlugin({
          filename: 'css/[name].[contenthash].css',
          allChunks: true
      })
  ],

然后成功：

- vue@2.6.10
- vue-server-renderer@2.6.12

This may cause things to work incorrectly. Make sure to use the same version for both.

总结：在做项目适配的时候遇到好多问题，例如vue版本与vue-template-compiler、vue-server-renderer的版本不一致等报错，最后重新安装三个一样的版本，最后成功。个人觉得这个插件很好用，省去自己写ssr配置的繁琐，但是骨架屏样式得自己手写，我查阅网上说可以使用ui图作为骨架屏，那会省略一点样式分离代码。饿了么自动生成骨架屏的插件page-skeleton-webpack-plugin我还没有尝试，等尝试一下再出一个文档记录一下https://github.com/ElemeFE/page-skeleton-webpack-plugin。

码农公寓

使用vue-skeleton-webpack-plugin、nprogress搭建骨架屏

相关文章