如安在webpack+vue+vue-cli下搭建多模块/单模块多路由骨架屏
媒介
骨架屏的用户感知比loading更好，此前看过许多专栏以及文章，此次实践中照样碰到须要进修的部份。
关于骨架屏或许占位符进修了Vue页面骨架屏注入实践，经由过程服务器衬着出静态页面，在js加载完之前举行首屏加载是感知比较合理的一个挑选。
包含由于可以信息面不全，对插件源码举行了细致解读，愿望关于将要在项目中搭建骨架屏的小伙伴们有所协助。
此次运用的vue版本是2.4.5因而vue-server-renderer也须要运用同一个版本
参考的文章有
vue-skeleton-webpack-plugin骨架屏与page-skeleton-webpack-plugin骨架屏天生插件
基于vue和webpack的skeleton插件
以上参考文章里有注入骨架屏的道理与学问，在此就不搬运了，谢谢以上伟人。
vue-skeleton-webpack-plugin插件GITHUB地点
援用的组件
vue-skeleton-webpack-plugin
主要运用这个骨架屏组件 以及他依靠的其他组件 此组件我运用1.22版本，最新的将插件供应的loader放到了非主要API部份，因而在本文章中未运用此loader，以防版本晋级将此loader删去。vue-server-renderer
熟习ssr的小伙伴对这个插件都不生疏，经由过程其API createBundleRenderer建立render举行衬着，详细参考[Vue页面骨架屏注入实践][5]。 **注重点：vue与vue-server-renderer要运用同一个版本，不然会报错**extract-text-webpack-plugin
这也是比较主要的一个插件，假如你的脚手架没有对html与css举行星散，那末你的款式（除了内联款式之外）将没法被运用，后续将会对此解说。
正文
怎样设置多模块（多页面）骨架屏
在你的webpack设置文件的plugins 到场插件，为了节约机能我只在prod的时刻举行plugins插进去，开辟形式设置以路由的形式举行开辟，后续会详解。
webpackConfig.plugins.push(
new SkeletonWebpackPlugin({
webpackConfig: require('./webpack.skeleton.conf'), //主要的设置在个部份
quiet: true,
minimize: true,
/**router: {
mode: 'hash',
routes: skeletonPluginRoutes //此部份设置是SPA（单页面）多路由脚手架设置
}**/
}));webpack.skeleton.conf.js
...//以上通例设置不写明
let merge = require('webpack-merge');
let path = require('path')
let merge = require('webpack-merge')
let config = require('../config')
let utils = require('./utils')
let baseWebpackConfig = require('./webpack.base.conf')
let SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin');
let 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,
module: {},
entry: {
'key':'../entry-skeleton.js'，//这是你骨架屏进口文件的map，注重这里的key必需与你在webpack里模块的进口文件雷同
'key':value，//对应的键值是你的骨架屏进口文件
},
output: Object.assign({}, baseWebpackConfig.output, {
libraryTarget: 'commonjs2'
}),
plugins: []
});
//假如项目中没有款式与html的星散，可以扎到本身rules设置的.vue loader 举行开启
skeletonWebpackConfig.module.rules[1].options.loaders = utils.cssLoaders({
sourceMap: sourceMapEnabled,
extract: true
});
module.exports = skeletonWebpackConfig设置此config文件最主要的
- 将entry文件的key与webpack的key举行配对
- 肯定要将本身的css与HTML星散（假如涌现没法载入款式的状况）
entry-skeleton.js
import Vue from 'vue'
import homeSkeleton from './home.skeleton.vue';
// import indexOverViewSkeleton from './indexOverView.skeleton.vue';
export default new Vue({
components: {
homeSkeleton,
// indexOverViewSkeleton
},
template:
`<homeSkeleton id="homeSkeleton" style="display:none"/>`
});
只是简朴的VUE进口文件，照旧要注重VUE的语法与划定规矩，比方template只允许存在一个根元素
怎样设置单页面多路由骨架屏
webpackConfig.plugins.push(
new SkeletonWebpackPlugin({
webpackConfig: require('./webpack.skeleton.conf'),
quiet: true,
minimize: true,
router: {
mode: 'hash',
routes: [{
path:'/home', //你愿望这个路由页面时涌现骨架屏
skeletonId:'homeSkeleton', //在skeleton进口文件里设置的id
entryName:'key' //webpack打包时你进口文件的entryName，应与在plugin 进口文件一样的MAPkey一致
},{
path:'/main', //你愿望这个路由页面时涌现骨架屏
skeletonId:'mainSkeleton', //在skeleton进口文件里设置的id
entryName:'key' //webpack打包时你进口文件的entryName，应与在plugin 进口文件一样的MAPkey一致
},]
}
}));entry-skeleton.js
import Vue from 'vue'
import homeSkeleton from './home.skeleton.vue';
import indexOverViewSkeleton from './indexOverView.skeleton.vue';
export default new Vue({
components: {
homeSkeleton,
indexOverViewSkeleton
},
template:
`<div>
<indexOverViewSkeleton id="indexOverViewSkeleton"
style="display:none"/>
<homeSkeleton id="homeSkeleton" style="display:none"/>
</div>`
});设置中须要注重的几点
1、坚持本身的entryName，config里entryKey与webpack脚手架进口文件的key一致
2、开启款式星散！！！！！！！！主要的事变说三遍
3、由于插件阅历了几个版本的更新，现在版本是接收loader的，但设置已扁平化，所以发起不实用插件供应的loader设置。
4、省去了笔者部份依据脚手架设置的自动猎取进口的代码，运用手写的，削减设置，可以让脚手架做的事变，我们就不要做了哦！！！笔者的发起。
这篇小小的笔记先引见设置文件吧~~~愿望对人人有所协助，也很谢谢网上的列位码字作者供应的思绪。
看了插件的源码思绪也很清楚，关于骨架屏的道理有了更深的明白。
鸭，到点去敷面膜了，愿望本身有一天也可以开源一款前端插件，成为皮肤最好的前端。哈哈哈哈哈哈。
