Remove webpack-progress hack

Motivation

In the previous versions of Bemuse, I wanted to display a loading indicator that showed the loading progress of Bemuse’s JavaScript bundle, similar to loading screens in games built using ~~Macromedia~~ Flash.

To be able to do this, I used a pretty elaborate hack.

When webpack generates a bundle, it includes in the main chunk, the runtime code that contains the logic to download other chunks. webpack loads a chunk by creating <script> tags pointing to the JS file, and insert it into <head>:

head.appendChild(script);

To monitor the download progress, I have to intercept the script loading process. I am able to do this by writing a webpack plugin that patches the runtime code to allow application code to override how chunks are loaded:

// A webpack plugin that hacks the webpack JSONP template
// to allow introspection of script download progress.
//
module.exports = function ProgressPlugin() {
  return function ProgressPluginInstance() {
    this.plugin('compilation', function(compilation) {
      compilation.mainTemplate.plugin('require-ensure', function(result) {
        result = result.replace('head.appendChild(script);', function() {
          return (
            'window.WebpackLoadingContext ? ' +
            'window.WebpackLoadingContext.load(script, head) : ' +
            'head.appendChild(script);'
          )
        })
        return result
      })
    })
  }
}

Now, before the main chunk downloads the subsequent chunks, it overrides webpack chunk download logic. Instead of download the chunk normally by placing a <script> tag into <head>, the overridden logic downloads the JavaScript chunk using XMLHTTPRequest.

This allows the loading progress to be monitored. Once the file has been downloaded, the downloaded data gets converted into a blob: URL and added as a <script> tag to the <head>.

This little hacked works well since webpack 1 and still works today with no modifications.

However, now that we are using webpack 4, there are few complications:

Due to the chunk splitting optimization, a single dynamic import may contain multiple chunk script files to be loaded. See: SplitChunksPlugin.
Our loading context only works with a single script file being loaded at the same time.

Now I've seen that displaying the loading progress bar for the app bundle is not a widely-used practice anymore, keeping this hack around adds to the maintenance costs of this project, so I decided to remove this hack.

The loading screen has also been modernized a bit.

bemusic / bemuse

Remove webpack-progress hack #524

Motivation

Codecov Report