vue-skeleton-webpack-plugin创建骨架屏踩坑之路(Skeleton.vue 内部STYLE样式未生效问题)

这两天有空了解了下骨架屏,虽然了解的有点迟,但是自己总要了解下吧,学习永远不算晚。

参考文章:

vue-cli 构建的项目如何加入骨架屏 skeleton

https://blog.csdn.net/u012878818/article/details/81216272#commentsedit

让骨架屏更快渲染 - xiaOp的博客

https://juejin.im/entry/5ab37c126fb9a028c06abc18

 

现根据第一篇文章的步骤一步步来

  1. vue-cli创建项目
  2. 进去当前项目,执行命令 : npm install vue-skeleton-webpack-plugin 
  3. src目录下创建Skeleton.vue文件, 把代码拷进去
  4. 在src目录下创建entry-skeleton.js文件,把代码拷进去
  5. 在build目录下创建webpack.skeleton.conf.js,把代码拷进去
  6. 然后在webpack.dev.conf.js和webpack.prod.conf.js分别加入

    const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')

  // inject skeleton content(DOM & CSS) into HTML  以下代码放在 plugins参数中

   new SkeletonWebpackPlugin({

       webpackConfig: require('./webpack.skeleton.conf'),

       quiet: true  

 })

运行项目,为了更好的看到效果,可以选择将chrome 调试模式下network 切换成slow 3G,如图所示

   

查看效果,先这样

再这样

一切都是正常的运行着。然后,现在看我们的Skeleton.vue页面其实是放的两张svg图,这效果不够炫嘛,根据第一篇文章的延伸继续优化下,直接使用这种效果 。

把第一片文章的这个效果的html ,css都拷过去,然后运行看效果。等待预料中的效果,然而,竟先是这样

再这样

等等这是什么鬼,为什么先是一片空白。审查元素看看先,然后发现这个

设置的样式未生效啊,看看文章提问,有人提出了css不生效问题,文章作者没回复。这就值得研究研究了。组里也是我第一个研究骨架屏,问其他小伙伴也不知道。找到skeleton-DEMO 的github地址(https://github.com/xiaoiver/skeleton-demo),我要看个究竟。

对比参照根据第一篇文章创建的几个文件都和demo没区别,那原因在哪里呢。然鹅,当我看到demo 目录下这一排排的提示时,如图:

收到讯号大哥,原来如此大哥, 要为skeleton使用异步的css,然后第二篇文章就产生用途啦。 两篇文章都说的很详细,很容易懂。我就说说我最后修改的步骤

1.首先修改我src目录下的main.js文件,从图一到图二

图一

图二

2.修改index.html

修改为(github demo的index.html代码)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>skeleton-demo</title>
    <% for (var jsFilePath of htmlWebpackPlugin.files.js) { %>
        <link rel="preload" href="<%= jsFilePath %>" as="script">
    <% } %>
    <% for (var cssFilePath of htmlWebpackPlugin.files.css) { %>
        <link rel="preload" href="<%= cssFilePath %>" as="style" onload="this.onload=null;this.rel='stylesheet';window.STYLE_READY=1;window.mountApp&&window.mountApp();">
        <noscript><link rel="stylesheet" href="<%= cssFilePath %>"></noscript>
    <% } %>
    <script>!function(t){"use strict";t.loadCSS||(t.loadCSS=function(){});var e=loadCSS.relpreload={};if(e.support=function(){var e;try{e=t.document.createElement("link").relList.supports("preload")}catch(t){e=!1}return function(){return e}}(),e.bindMediaToggle=function(t){function e(){t.media=a}var a=t.media||"all";t.addEventListener?t.addEventListener("load",e):t.attachEvent&&t.attachEvent("onload",e),setTimeout(function(){t.rel="stylesheet",t.media="only x"}),setTimeout(e,3e3)},e.poly=function(){if(!e.support())for(var a=t.document.getElementsByTagName("link"),n=0;n<a.length;n++){var o=a[n];"preload"!==o.rel||"style"!==o.getAttribute("as")||o.getAttribute("data-loadcss")||(o.setAttribute("data-loadcss",!0),e.bindMediaToggle(o))}},!e.support()){e.poly();var a=t.setInterval(e.poly,500);t.addEventListener?t.addEventListener("load",function(){e.poly(),t.clearInterval(a)}):t.attachEvent&&t.attachEvent("onload",function(){e.poly(),t.clearInterval(a)})}"undefined"!=typeof exports?exports.loadCSS=loadCSS:t.loadCSS=loadCSS}("undefined"!=typeof global?global:this);</script>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

 

3.编写并引入插件 OmmitCSSPlugin 监听 HTMLWebpackPlugin 的事件,过滤掉 CSS。这样插件就不会自动插入 <link>了,在build目录下创建ommit-css-webpack-plugin.js文件。

代码如下:

module.exports = class OmmitCSSPlugin {
    constructor() {}
    apply(compiler) {
        compiler.plugin('compilation', (compilation) => {
            compilation.plugin(
                'html-webpack-plugin-alter-asset-tags',
                (args, cb) => {
                    args.head = args.head.filter((link) => link.attributes.rel !== 'stylesheet');
                    cb(null, args);
                }
            );
        });
    }
}

4.在webpack.prod.conf.js文件中引入插件

   const OmmitCSSPlugin = require('./ommit-css-webpack-plugin')

   在plugins参数里 new 一下

    new OmmitCSSPlugin(),

5.先build后部署网站(只要通过服务器地址访问即可),访问index.html 效果就出来了(一定要run build后再通过服务地址访问

总结:

根据这些步骤就可以使用vue-skeleton-webpack-plugin插件配置vue-cli创建的webpack模板项目的骨架屏了,更多的研究可以参考 DEMO 地址 和 Github 地址

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值