1．什么是骨架屏幕？

在页面加载数据之前，有一段空白时间，要么用loading加载，要么就用骨架屏。

在开发webapp的时候总是会受到首屏加载时间过长的影响，主流的解决方法是在载入完成之前显示loading图效果，而一些大公司会配置一套服务端渲染的架构来解决这个问题。考虑到ssr所要解决的一系列问题，越来越多的APP采用了“骨架屏”的方式去提升用户体验。

vue搭建骨架屏需要 按照 npm/cnpm  i  vue-skeleton-webpack-plugin -S/-D

核心文件 骨架屏组件 

Skeleton.vue  组件自己写或者用ui设计的对应界面的图片

一、entry-skeleton.js

import Vue from 'vue'import Skeleton from './Skeleton.vue'export default new Vue({    components: {        Skeleton    },    template: '
      ' //对应webapck.prod.conf.js/webpack.dev.conf.js配置 多个id区分样式设置 style="display:none"})

二、webpack.skeleton.conf.js

'use strict';const path = require('path') const merge = require('webpack-merge') const baseWebpackConfig = require('./webpack.base.conf') const nodeExternals = require('webpack-node-externals')const config = require('../config')const utils = require('./utils')const isProduction = process.env.NODE_ENV === 'production'const sourceMapEnabled = isProduction  ? config.build.productionSourceMap  : config.dev.cssSourceMapfunction 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: []})// important: enable extract-text-webpack-plugin // 重点配置skeletonWebpackConfig.module.rules[0].options.loaders = utils.cssLoaders({  sourceMap: sourceMapEnabled,  extract: true})module.exports = skeletonWebpackConfig;

三、webpack.prod.conf.js

'use strict'const path = require('path')const utils = require('./utils')const webpack = require('webpack')const config = require('../config')const merge = require('webpack-merge')const baseWebpackConfig = require('./webpack.base.conf')const CopyWebpackPlugin = require('copy-webpack-plugin')const HtmlWebpackPlugin = require('html-webpack-plugin')const ExtractTextPlugin = require('extract-text-webpack-plugin')const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')const UglifyJsPlugin = require('uglifyjs-webpack-plugin')const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')//引入插件const env = require('../config/prod.env')const webpackConfig = merge(baseWebpackConfig, {  module: {    rules: utils.styleLoaders({      sourceMap: config.build.productionSourceMap,      extract: true,      usePostCSS: true    })  },  devtool: config.build.productionSourceMap ? config.build.devtool : false,  output: {    path: config.build.assetsRoot,    filename: utils.assetsPath('js/[name].[chunkhash].js'),    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')  },  plugins: [    // 配置插件    new SkeletonWebpackPlugin({      webpackConfig: require('./webpack.skeleton.conf'),      quiet: true,      minimize: true,      // router: {
            //   mode: 'history',      //   routes: [      //     {
            //       path: '/xxxxt',    //对应使用路由配置      //       skeletonId: 'skeleton1'    // 所用骨架屏的id标识      //     },      //   ]      // }    }),    // http://vuejs.github.io/vue-loader/en/workflow/production.html    new webpack.DefinePlugin({      'process.env': env    }),    new UglifyJsPlugin({      uglifyOptions: {        compress: {          warnings: false        }      },      sourceMap: config.build.productionSourceMap,      parallel: true    }),    // extract css into its own file    new ExtractTextPlugin({      filename: utils.assetsPath('css/[name].[contenthash].css'),      // Setting the following option to `false` will not extract CSS from codesplit chunks.      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.      // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,       // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110      allChunks: true,    }),    // Compress extracted CSS. We are using this plugin so that possible    // duplicated CSS from different components can be deduped.    new OptimizeCSSPlugin({      cssProcessorOptions: config.build.productionSourceMap        ? { safe: true, map: { inline: false } }        : { safe: true }    }),    // generate dist index.html with correct asset hash for caching.    // you can customize output by editing /index.html    // see https://github.com/ampedandwired/html-webpack-plugin    new HtmlWebpackPlugin({      filename: config.build.index,      template: 'index.html',      inject: true,      minify: {        removeComments: true,        collapseWhitespace: true,        removeAttributeQuotes: true        // more options:        // https://github.com/kangax/html-minifier#options-quick-reference      },      // necessary to consistently work with multiple chunks via CommonsChunkPlugin      chunksSortMode: 'dependency'    }),    // keep module.id stable when vendor modules does not change    new webpack.HashedModuleIdsPlugin(),    // enable scope hoisting    new webpack.optimize.ModuleConcatenationPlugin(),    // split vendor js into its own file    new webpack.optimize.CommonsChunkPlugin({      name: 'vendor',      minChunks (module) {        // any required modules inside node_modules are extracted to vendor        return (          module.resource &&          /\.js$/.test(module.resource) &&          module.resource.indexOf(            path.join(__dirname, '../node_modules')          ) === 0        )      }    }),    // extract webpack runtime and module manifest to its own file in order to    // prevent vendor hash from being updated whenever app bundle is updated    new webpack.optimize.CommonsChunkPlugin({      name: 'manifest',      minChunks: Infinity    }),    // This instance extracts shared chunks from code splitted chunks and bundles them    // in a separate chunk, similar to the vendor chunk    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk    new webpack.optimize.CommonsChunkPlugin({      name: 'app',      async: 'vendor-async',      children: true,      minChunks: 3    }),    // copy custom static assets    new CopyWebpackPlugin([      {        from: path.resolve(__dirname, '../static'),        to: config.build.assetsSubDirectory,        ignore: ['.*']      }    ])  ]})if (config.build.productionGzip) {  const CompressionWebpackPlugin = require('compression-webpack-plugin')  webpackConfig.plugins.push(    new CompressionWebpackPlugin({      asset: '[path].gz[query]',      algorithm: 'gzip',      test: new RegExp(        '\\.(' +        config.build.productionGzipExtensions.join('|') +        ')$'      ),      threshold: 10240,      minRatio: 0.8    })  )}if (config.build.bundleAnalyzerReport) {  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin  webpackConfig.plugins.push(new BundleAnalyzerPlugin())}module.exports = webpackConfig

四、webpack.dev.conf.js

'use strict'const utils = require('./utils')const webpack = require('webpack')const config = require('../config')const merge = require('webpack-merge')const path = require('path')const baseWebpackConfig = require('./webpack.base.conf')const CopyWebpackPlugin = require('copy-webpack-plugin')const HtmlWebpackPlugin = require('html-webpack-plugin')const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')const portfinder = require('portfinder')const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')//引入插件const HOST = process.env.HOSTconst PORT = process.env.PORT && Number(process.env.PORT)const devWebpackConfig = merge(baseWebpackConfig, {  module: {    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })  },  // cheap-module-eval-source-map is faster for development  devtool: config.dev.devtool,  // these devServer options should be customized in /config/index.js  devServer: {    clientLogLevel: 'warning',    historyApiFallback: {      rewrites: [        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },      ],    },    hot: true,    contentBase: false, // since we use CopyWebpackPlugin.    compress: true,    host: HOST || config.dev.host,    port: PORT || config.dev.port,    open: config.dev.autoOpenBrowser,    overlay: config.dev.errorOverlay      ? { warnings: false, errors: true }      : false,    publicPath: config.dev.assetsPublicPath,    proxy: config.dev.proxyTable,    quiet: true, // necessary for FriendlyErrorsPlugin    watchOptions: {      poll: config.dev.poll,    }  },  plugins: [    // 配置插件    new SkeletonWebpackPlugin({      webpackConfig: require('./webpack.skeleton.conf'),      quiet: true,      minimize: true,      // router: {
            //   mode: 'history',      //   routes: [      //     {
            //       path: '/xxx',    //对应使用路由配置      //       skeletonId: 'skeleton1'    // 所用骨架屏的id标识      //     },      //   ]      // }    }),    new webpack.DefinePlugin({      'process.env': require('../config/dev.env')    }),    new webpack.HotModuleReplacementPlugin(),    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.    new webpack.NoEmitOnErrorsPlugin(),    // https://github.com/ampedandwired/html-webpack-plugin    new HtmlWebpackPlugin({      filename: 'index.html',      template: 'index.html',      inject: true    }),    // copy custom static assets    new CopyWebpackPlugin([      {        from: path.resolve(__dirname, '../static'),        to: config.dev.assetsSubDirectory,        ignore: ['.*']      }    ])  ]})module.exports = new Promise((resolve, reject) => {  portfinder.basePort = process.env.PORT || config.dev.port  portfinder.getPort((err, port) => {    if (err) {      reject(err)    } else {      // publish the new Port, necessary for e2e tests      process.env.PORT = port      // add port to devServer config      devWebpackConfig.devServer.port = port      // Add FriendlyErrorsPlugin      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({        compilationSuccessInfo: {          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],        },        onErrors: config.dev.notifyOnErrors        ? utils.createNotifierCallback()        : undefined      }))      resolve(devWebpackConfig)    }  })})