前端骨架屏方案调研

css通过伪元素实现骨架样式，通过操作样式实现骨架和页面的动态切换

在模版中来实现骨架屏

使用一个Base64的图片来作为骨架屏

使用图片作为骨架屏； 简单暴力，让UI同学花点功夫吧；小米商城的移动端页面采用的就是这个方法，它是使用了一个Base64的图片来作为骨架屏。

使用专门的.vue 文件来完成骨架屏

使用专门的.vue 文件并自动插入静态骨架屏

采用这个插件来做，看 https://github.com/xiaoiver/multi-skeleton-demo/blob/master/build/webpack.skeleton.conf.js 这个demo即可。

在配置的过程中遇到css一直不生效的问题，需要配置一下这个extract-text-webpack-plugin

// important: enable extract-text-webpack-plugin
skeletonWebpackConfig.module.rules[0].options.loaders = utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: true
}),

完整配置如下

'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'
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/skeleton.js')
    },
    output: Object.assign({}, baseWebpackConfig.output, {
        libraryTarget: 'commonjs2'
    }),
    externals: nodeExternals({
        whitelist: /\.css$/
    }),
    plugins: []
})

// important: enable extract-text-webpack-plugin
skeletonWebpackConfig.module.rules[0].options.loaders = utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: true
}),

module.exports = skeletonWebpackConfig

标题配置有的页面有骨架屏，有的没有

new SkeletonWebpackPlugin({
      webpackConfig: require('./webpack.skeleton.conf'),
       router: {
           mode: 'hash',
           routes: [{
               path: '/',
               skeletonId: 'skeleton-home'
           }]
       }
   }),

skeletonId在skeleton.vue里面配置好

<template>
<div>
    <skeleton-home id="skeleton-home" style="display:none"/>
</div>
</template>

<script>
import skeletonHome from './skeletonHome'
export default {
    name: "skeleton",
    components: {
        skeletonHome
    }
};
</script>

<style lang="scss" scoped>
</style>

自动生成骨架屏

采用这个插件，https://github.com/ElemeFE/page-skeleton-webpack-plugin/blob/master/docs/i18n/zh_cn.md，不过现有项目都是hash模式，此插件不支持，改为history模式老项目无法适用

自己编译好ssr代码注入

https://juejin.cn/post/6844903762251743246