vue-skeleton-webpack-plugin搭建骨架屏，以及nprogress優化使用者體驗

最近在優化手裡面項目，發現項目首頁加載實在很慢，第一次加載白屏顯示時間很長，使用者體驗極差，是以自己鼓搗加個骨架屏和加載滾動進度條試試。

使用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 [email protected]
# for webpack 1
npm install --save-dev [email protected]
           

然後在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
      })
  ],
           

然後成功：

- [email protected]
- [email protected]

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。

最後代碼GitHub位址是：https://github.com/gr-cara/skeletonProjrct