Develop a simple and easy-to-understand webpack skeleton screen plugin

Views: 4579editDate: 4/6/2019

1、The Origin of Skeleton Screens

Single-page applications are becoming increasingly common in front-end page development nowadays. They have many advantages, but the disadvantage is also obvious: the first screen loading is often very slow, presenting a blank page, which gives a poor user experience. Besides optimizing the loading of resources as much as possible, we don't have any other good solutions. To solve this problem, skeleton screens were born.

2、The Principle of Skeleton Screens：

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>skeleton-plugin</title>
   <style></style>
 </head>
 <body>
     <div id="root"></div>
 </body>
 </html>

A single-page application is actually just an HTML file, with an HTML structure containing a div#root. When the JavaScript is fully loaded and executed, the div with the id of root will be completely replaced. Therefore, we can think of writing some HTML structures with animations inside the div#root so that before the JavaScript is loaded, users can see a pre-written skeleton page instead of a blank page. Wouldn't this be a better user experience?

3、Writing a Webpack Plugin：

（1）Introduction to Webpack Plugins

First, build a simple Webpack project (this process is not described in detail here). Create a file named skeleton-plugin.js in the root directory. Since we need to regenerate a new skeleton screen index.html file every time we package, we need to use the html-webpack-plugin plugin. We inject a listener of the html-webpack-plugin plugin in the skeleton-plugin.js plugin to insert the skeleton screen code before the html-webpack-plugin plugin generates the index.html file.

Before this, we need to understand some knowledge about writing Webpack plugins. The following is a quote from the official website:

(https://www.webpackjs.com/contribute/writing-a-plugin/)

（https://www.webpackjs.com/contribute/writing-a-plugin/）

（2）Specific Implementation of the Plugin

From this, we can know that our skeleton screen plugin needs to have an apply method, which will be called once by the Webpack compiler when the plugin is installed. The apply method takes a compiler parameter, which exposes Webpack's lifecycle hook functions for developers to use. We can use it to access the main environment of Webpack. The usage is: compiler.hooks.hookName.tap(...). skeleton-plugin.js

    //Import the html-webpack-plugin plugin
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    //Create a SkeletonPlugin class
    class SkeletonPlugin {
    
      apply (compiler) {
      
        /**
         Here we listen to the compilation hook function, the purpose is to execute the main code of our SkeletonPlugin plugin after the compilation is created       
        */
        compiler.hooks.compilation.tap('SkeletonPlugin', (compilation) => {
        
          // Before the html-webpack-plugin plugin generates resources to the output directory, we complete the insertion of the skeleton screen code
          
          HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync(
            'SkeletonPlugin',
            (htmlData, cb) => {
            
              /**
                We do the insertion of the skeleton screen code in this callback
                htmlData.html is the string parsed from the template of the html- 
                webpack-plugin plugin
                Before outputting index.html, we replace <div id="root"></div> in 
                the template with the skeleton screen code.
              */
              htmlData.html = htmlData.html.replace(
              '<div id="root"></div>',
              `<div id="root">
                  <div style="background-color:red;height:300px;display:none;" id="default" >
                      I Am Skeleton
                  </div>
              </div>`);
            
            // Finally, execute the cb callback to tell Webpack that our plugin has 
            // completed its operations and let it continue to perform other operations        
            cb(null, htmlData)
            }
          )
        });
      }
    }
    //导出SkeletonPlugin插件
    module.exports = SkeletonPlugin;

（3）Using the Plugin

Finally, write the following code in the Webpack configuration file webpack.config.js:

      plugins: [
        new HtmlWebpackPlugin({
            // The location of the index.html template, the htmlData.html mentioned 
            // above is the content parsed from this template.
            template: './public/index.html',
            inject: 'body',
        }),
        new SkeletonPlugin(),
      ]

After Webpack is successfully packaged, the index.html file in the dist folder will look like the image below:

4、Conclusion：

Up to this point, the simple skeleton screen plugin has been completed. However, this plugin will only have a skeleton screen effect when the page is first loaded. It will not have any effect on other pages

Menu