如何在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、省去了笔者部分根据脚手架配置的自动获取入口的代码,使用手写的,减少配置,能够让脚手架做的事情,我们就不要做了哦!!!笔者的建议。
这篇小小的笔记先介绍配置文件吧~~~希望对大家有所帮助,也很感谢网上的各位码字作者提供的思路。
看了插件的源码思路也很清晰,对于骨架屏的原理有了更深的理解。
鸭,到点去敷面膜了,希望自己有一天也可以开源一款前端插件,成为皮肤最好的前端。哈哈哈哈哈哈。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。