共计 3074 个字符，预计需要花费 8 分钟才能阅读完成。
vue 骨架屏优化渲染问题
参考文章：
vue-cli 构建的项目如何加入骨架屏 skeleton
https://blog.csdn.net/u012878…
让骨架屏更快渲染 – xiaOp 的博客
https://juejin.im/entry/5ab37…
vue-cli 创建项目
进去当前项目，执行命令：npm install vue-skeleton-webpack-plugin
在 src 目录下创建 Skeleton.vue 文件，把代码拷进去
在 src 目录下创建 entry-skeleton.js 文件, 把代码拷进去
在 build 目录下创建 webpack.skeleton.conf.js, 把代码拷进去
然后在 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
})
简单骨架屏配置修改
1. 首先修改我 src 目录下的 main.js 文件，
let app = new Vue({
router,
store,
components: {App},
template: '<App/>'
})
window.mountApp = () => {app.$mount('#app')
}
if (process.env.NODE_ENV === 'production') {if (window.STYLE_READY) {window.mountApp()
}
} else {window.mountApp()
}
2. 修改 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 后再通过服务地址访问）
正文完
