手写Webpack Plugin插件实现骨架屏

前端开发是与用户联系最为密切的职位，用户体验是最值得关注的问题。现在越来越多的APP采用了骨架屏，随着前端SPA单页的流行，首屏加载也困扰着许多开发者，今天就来实现一个骨架屏！

前提：

以vue项目为例，使用官方脚手架初始化一套项目！

1.什么是骨架屏？

骨架屏就是页面内容还未加载完成的时候，先让一些图片或者固定结构占位，待内容加载完成后把他替换掉。

image.png
image.png

2. 编写骨架屏样式

首先咱们要写一个骨架屏，可以是ui给你的图，也可以是div css写一个简单点的。

image.png

上图代码如下：

<div id="app">
    <div style="width:100%;height:50px;background: rgb(211, 219, 224);"></div>
    <ul class="loading-skeleton" style="">
        <li>
            <div class="d1"></div>
            <div class="d2 o"></div>
            <div class="d2 d"></div>
        </li>
        <li>
            <div class="d1"></div>
            <div class="d2 o"></div>
            <div class="d2 d"></div>
        </li>
        <li>
            <div class="d1"></div>
            <div class="d2 o"></div>
            <div class="d2 d"></div>
        </li>
        <li>
            <div class="d1"></div>
            <div class="d2 o"></div>
            <div class="d2 d"></div>
        </li>
        <li>
            <div class="d1"></div>
            <div class="d2 o"></div>
            <div class="d2 d"></div>
        </li>
        <li>
            <div class="d1"></div>
            <div class="d2 o"></div>
            <div class="d2 d"></div>
        </li>
    </ul>
    <style>
        .loading-skeleton{
            width:100%;height:auto;list-style: none;overflow: hidden;margin:0;padding:0;
        }
        .loading-skeleton li{
            width: 40%;
            height: 180px;
            float: left;
            margin: 3% 7% 3% 3%;
        }
        .loading-skeleton li .d1{
            width: 100%;
            height: 130px;
            background: rgb(211, 219, 224);
        }
        .loading-skeleton li .d2{
            width: 100%;
            height: 15px;
            background: rgb(211, 219, 224);
            margin-top: 5px;
        }
        .loading-skeleton .o {
            float:left;width:92%;height:100px;margin:3%;
            background: rgb(211, 219, 224);
            animation: skeleton-stripes 1s linear infinite;
            transform-origin: left;
            animation: skeleton-stretch .5s linear infinite alternate;
        }
        .loading-skeleton .d {
            float:left;width:92%;height:100px;margin:3%;
            background: rgb(211, 219, 224);
            animation: skeleton-stripes 1s linear infinite;
            transform-origin: left;
            animation: skeleton-stretch .5s -.5s linear infinite alternate;
        }

        @keyframes skeleton-stretch {
            from {
                transform: scalex(1);
            }
            to {
                transform: scalex(.3);
            }
        }
    </style>
</div>

3. 编写Plugin

在build目录下新建MyPlugin_skeleton.js（名字随便起），并写入如下代码:

let MyPlugin_skeleton = function (options) {
    this.template = options.template;
};
MyPlugin_skeleton.prototype.apply = function (compiler) {
    console.log('生成骨架中...');
    compiler.plugin('compilation', compilation => {
        compilation.plugin('html-webpack-plugin-before-html-processing', (htmlData, callback) => {
            /**
             * htmlData是打包dist后 index.html 的内容
             * 然后用replace去替换掉
             */
            // console.log(htmlData)
            htmlData.html = htmlData.html.replace(
                `<div id="app"></div>`,
                `<div id="app">
                        ... 这里是写好的骨架屏样式
                 </div>`
            );
            callback(null, htmlData);
        });
    });
};
module.exports = MyPlugin_skeleton;

html-webpack-plugin 提供了一系列事件：

html-webpack-plugin-before-html-generation
html-webpack-plugin-before-html-processing
html-webpack-plugin-alter-asset-tags
html-webpack-plugin-after-html-processing
html-webpack-plugin-after-emit
html-webpack-plugin-alter-chunks
我们可以注册到它处理 HTML 之前，使用 html-webpack-plugin-before-html-processing 事件把骨架屏动态插入进去；

4.在dev 和 prod 配置文件中引入自己的插件

// 引入骨架插件
const MyPlugin_skeleton = require('./MyPlugin_skeleton')
 ...
new HtmlWebpackPlugin({
   filename: config.build.index,
   template: 'index.html',
   inject: true,
   minify: {
     removeComments: true,
     collapseWhitespace: true,
     removeAttributeQuotes: true
     // more options:
     // https://github.com/kangax/html-minifier#options-quick-reference
    },
    // necessary to consistently work with multiple chunks via CommonsChunkPlugin
    chunksSortMode: 'dependency'
 }),
 new MyPlugin_skeleton({
   template: '骨架屏插件'
 }),
 ...

5.打包

执行cnpm run build,打开dist/index.html 可以看到我们的骨架屏已经插入到root中

image.png

到此我们实现了在DOM挂载之前，先显示骨架屏，是不是很简单，此插件可以用于任何项目。

拓展

其实还可以根据用户访问路径进行打包不同的骨架，无非就加入path判断，塞入不同样式。

觉得写的不错的小伙伴记得点赞加关注哦！O(∩_∩)O