[骨架屏][vue]webpack+vue+vue-cli下如何搭建多模块-单模块多路由骨架屏

如何搭建多模块/单模块多路由骨架屏webpack+vue+vue-cliPreface下骨架屏的用户感知要好于loading。之前看了很多专栏和文章，在这次实践中还是遇到了一些需要学习的部分。对于骨架屏或者占位符，我学习了Vue页面骨架屏注入的做法，通过服务端渲染静态页面，在加载js之前先加载首屏，是感知上比较合理的选择。包括插件源码的详细解读，因为资料可能不全，希望对项目中准备搭建骨架屏的小伙伴有所帮助。这次使用的vue版本是2.4.5，所以vue-server-renderer也需要使用相同的版本。参考的文章有vue-skeleton-webpack-plugin骨架屏和page-skeleton-webpack-plugin。骨架屏生成插件是基于vue和webpack的骨架插件，上面参考文章中有注入骨架屏的原理和知识，这里就不赘述了，感谢上面的大佬们。vue-skeleton-webpack-pluginvue-skeleton-webpack-plugin的GITHUB地址引用的组件，主要是使用了这个骨架屏组件和它所依赖的其他组件。我使用该组件的1.22版。插件提供的最新加载器放在非主API部分，所以本文不使用该加载器，以防版本升级删除该加载器。vue-server-renderer熟悉ssr的朋友对这个插件不陌生。通过其APIcreateBundleRenderer创建渲染器进行渲染。具体可以参考【Vue页面骨架屏注入实践】[5]。**注意：vue和vue-server-renderer必须使用同一个版本，否则会报错**extract-text-webpack-plugin这也是一个比较重要的插件，如果你的脚手架没有把html和css分开，那么你的样式（内联样式除外）将不会被应用，这将在后面解释。正文如何配置多模块（多页面）骨架屏在你的webpack配置文件的plugins中添加插件。为了节省性能，我只在prod中插入插件。开发模式配置在路由模式下开发，后面会详细说明。webpackConfig.plugins.push(newSkeletonWebpackPlugin({webpackConfig:require('./webpack.skeleton.conf'),//主要配置在这一段quiet:true,minimize:true,/**router:{mode:'hash',routes:skeletonPluginRoutes//这部分配置是SPA（单页）多路由脚手架配置}**/}));webpack.skeleton.conf.js...//上面的通用配置做的不指定letmerge=require('webpack-merge');letpath=require('path')letmerge=require('webpack-merge')letconfig=require('../config')letutils=require('./utils')letbaseWebpackConfig=require('./webpack.base.conf')letSkeletonWebpackPlugin=require('vue-skeleton-webpack-plugin');letisProduction=process.env.NODE_ENV==='production';//判断是否是开发模式，是否需要开启样式分离constsourceMapEnabled=isProduction?config.build.productionSourceMap:config.dev.cssSourceMap;//处理开发路径functionresolve(dir){returnpath.join(__dirname,'..',dir)}letskeletonWebpackConfig=merge(baseWebpackConfig,{target:'node',//devtool:false,module:{},entry:{'key':'../entry-skeleton.js',//这是你的骨架屏入口文件的映射，注意这里的key必须在你的webpack模块的入口文件同'key':value,//对应的key值就是你的骨架屏入口文件},output:Object.assign({},baseWebpackConfig.output,{libraryTarget:'commonjs2'}),plugins:[]});//如果项目中没有style和html分离，可以连接自己规则配置的.vueloader打开skeletonWebpackConfig.module.rules[1].options.loaders=utils.cssLoaders({sourceMap:sourceMapEnabled,extract:true});module.exports=skeletonWebpackConfig配置这个配置文件。最重要的是将入口文件的key和webpack的key配对。请务必将您的css与HTML分开（如果无法加载样式）条目-skeleton.jsimportVuefrom'vue'importhomeSkeletonfrom'./home.skeleton.vue';//importindexOverViewSkeletonfrom'./indexOverView.骨架.vue';exportdefaultnewVue({components:{homeSkeleton,//indexOverViewSkeleton},template:``});只是一个简单的VUE入口文件，还是要注意VUE的语法和规则，比如只允许一个模板根元素webpackConfig.plugins.push(newSkeletonWebpackPlugin({webpackConfig:require('./webpack.skeleton.conf'),quiet:true,minimize:true,router:{mode:'hash',routes:[{path:'/home',//你想让骨架屏出现在这个路由页面skeletonId:'homeSkeleton',//骨架入口文件中配置的identryName:'key'//webpack打包你的入口文件的entryName要和插件入口文件中的MAPkey一样},{path:'/main',//你想让骨架屏出现在这个路由页面skeletonId:'mainSkeleton',//骨架入口文件中配置的identryName:'key'//你webpack打包时入口文件的entryName要和插件入口文件中的MAPkey一致},]}}));entry-skeleton.js从'vue'导入Vue从'./home.skeleton.vue'导入homeSkeleton;从'./indexOverView.skeleton.vue'导入indexOverViewSkeleton;导出默认的新Vue({组件：{homeSkeleton，indexOverViewSkeleton}，模板：`

`});配置中需要注意的地方1.保持自己config中的entryName和entryKey与webpack脚手架入口文件的key保持一致2.启用样式分离！！！！！！！！重要的事说三遍。3、由于插件经历了多个版本的更新，当前版本接受loader，但配置已经扁平化，建议不要应用插件提供的loader配置。自动获取入口的代码，用手写的，减少配置，让脚手架做事的代码，我们不做！！！作者的建议。这篇小记先介绍下配置文件~~~希望对大家有所帮助，也非常感谢网上码字作者的思路。看了插件的源码，思路也很清晰，对骨架屏的原理也有了更深的理解。鸭子，是时候敷面膜了。希望有一天自己也能开源一个前端插件，成为皮肤最好的前端。哈哈哈哈哈哈。