webpack单页应用多路由多骨架屏插件

pingan8787 发布于2019-08-26 10:39 / 2075人阅读

摘要：前言在单页应用中可能会有一些特殊情况，需要不同的路由下显示不同的首骨屏。一般这种需求可以后端动态生成包含首骨屏代码实现，但如果想要纯前端实现的话目前并未发现比较好的库或插件。例如首骨屏模板

前言

在单页应用中可能会有一些特殊情况，需要不同的路由下显示不同的首骨屏。比如新闻列页和新闻详情页。一般这种需求可以后端动态生成包含首骨屏代码HTML实现，但如果想要纯前端实现的话目前并未发现比较好的库或插件。在公司的一个项目中有这种需求的情况，因此自己手动弄了一个webpack插件 -- spa-skeleton-webpack-plugin。

插件实现

一般首骨屏插件其实是用html-webpack-plugin插件提供的钩子在webpack打包时将首骨屏的样式和HTML写进index.html里面，本插件实现也是利用了html-webpack-plugin的钩子，然后将js代码和模板写入html，页面加载完后执行js代码再渲染模板。这种做法会比直接在后台动态生成html慢一点点，且HTML会比较大。

插件引入

npm install --save-dev spa-skeleton-webpack-plugin

项目地址：https://github.com/JhonMr/spa...

插件配置

1.webpack插件配置

webpack3 请用

const SkeletonPlugin = require("html-webpack-plugin/src/skeletonPlugin3.js");

并在webpack.base.conf.js里引入，配置如下边代码的new SkeletonPlugin()

webpack4 代码

const HtmlWebpackPlugin = require("html-webpack-plugin")
const SkeletonPlugin = require("spa-skeleton-webpack-plugin")
const path = require("path")
const webpackConfig = {
  entry: "index.js",
  output: {
    path: __dirname + "/dist",
    filename: "index.bundle.js"
  },
  plugin: [
    new HtmlWebpackPlugin({
       // Your HtmlWebpackPlugin config
    }),
    new SkeletonPlugin({
        wrapEl: "#app",     // 包裹元素
        mode: "hash",       //router模式(or history),
        templates: [        // routes: 路由，格式可以是字符串、数组、正则。 template:首骨屏代码路径。
            {routes: "/", template: path.resolve(__dirname, `${customPath1}`},
            {routes: ["/search", "/list"], template: path.resolve(__dirname, `${customPath2}`},
            {
                routes: [
                    {pattern: "^/detail?id=d+", attributes: "g"}   // RegExp config
                ],
                template: path.resolve(__dirname, `${customPath2}`
            }
        ]
    })
  ]
}

2.index.html配置

添加在包裹元素下面，如VUE项目的包裹标签#app下面。
例如：

首骨屏模板



    Index Skeleton

服务器托管专线服务多路由表多应用多线程应用多页面应用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106539.html

【骨架屏】【vue】如何在webpack+vue+vue-cli下搭建多模块/单模块多路由骨架屏

摘要：如何在下搭建多模块单模块多路由骨架屏前言骨架屏的用户感知比更好，此前看过很多专栏以及文章，此次实践中还是遇到需要学习的部分。包括因为可能信息面不全，对插件源码进行了详细解读，希望对于将要在项目中搭建骨架屏的小伙伴们有所帮助。如何在webpack+vue+vue-cli下搭建多模块/单模块多路由骨架屏前言骨架屏的用户感知比loading更好，此前看过很多专栏以及文章，此次实践中还是...

huhud 2019-08-02 16:07 评论0 收藏0
【骨架屏】【vue】如何在webpack+vue+vue-cli下搭建多模块/单模块多路由骨架屏

摘要：如何在下搭建多模块单模块多路由骨架屏前言骨架屏的用户感知比更好，此前看过很多专栏以及文章，此次实践中还是遇到需要学习的部分。包括因为可能信息面不全，对插件源码进行了详细解读，希望对于将要在项目中搭建骨架屏的小伙伴们有所帮助。如何在webpack+vue+vue-cli下搭建多模块/单模块多路由骨架屏前言骨架屏的用户感知比loading更好，此前看过很多专栏以及文章，此次实践中还是...

MkkHou 2019-08-23 14:07 评论0 收藏0
用vue从零开发和部署一款移动端pwa单页应用

摘要：另外，单页应用因为数据前置到了前端，不利于搜索引擎的抓取。所以我们需要对自己的单页应用进行一些优化。前言最近秋招之余空出时间来按自己的兴趣动手做了一个项目，一个基于vue-cli3.0, vue，typescript的移动端pwa，现在趁热打铁，将这个项目从开发到部署整个过程记录下来，并将从这个项目中学习到的东西分享出来，如果大家有什么意见或补充也可以在评论区提出。先介绍一下这个项...

Channe 2019-07-25 14:28 评论0 收藏0
用纯 DOM 的方式结合 Puppeteer 自动生成网页骨架屏

摘要：可以通过的提供的直接控制模拟大部分用户操作来进行或者作为爬虫访问页面来收集数据。骨架屏是在页面数据尚未加载完成前先给用户展示出页面的大致结构，直到请求数据返回后再显示真正的页面内容；随着单页应用（ SPA ）的越来越流行，单页应用的用户体验也越来越得到前端开发者的关注；为了优化用户体验，在数据到达用户之前，往往会在页面上加上 loading 的效果，而现在，越来越多的场景倾向于使...

BlackHole1 2019-08-23 12:19 评论0 收藏0