chunk-progress-webpack-plugin

2.0.1 • Public • Published

chunk-progress-webpack-plugin

Replaces the default async chunk loader with one which uses XHR and triggers progress event on document.

Install

npm i --save-dev chunk-progress-webpack-plugin

or

yarn add --dev chunk-progress-webpack-plugin

Use

In config:

const ChunkProgressWebpackPlugin = require('chunk-progress-webpack-plugin');
...
{
	plugins: [
		new ChunkProgressWebpackPlugin()
	]
}

In application:

document.addEventListener('chunk-progress-webpack-plugin', function(event) {
	event.detail.loaded; // total bytes loaded
	event.detail.total; // total bytes requested
	event.detail.loaded / event.detail.total * 100; // total progress percentage
	const resource = event.detail.resource; // info about resource that triggered the event
	resource.loaded;
	resource.total;
	resource.url;
});

The root loaded/total values are reset to 0 when all concurrent loads complete. This is particularly useful for cases where user interaction is blocked while resources are loading (e.g. startup of a SPA or web game). In cases where multiple unrelated sections of code are importing resources asynchronously, the resource values are likely to be more useful.

A complete/100% progress event is not provided under the assumption that this can be handled on the complete of the original resource import; e.g. import('resource').then(()=>{/* fully loaded */})

XHR Caveats

Because this plugin makes webpack use XHR instead of JSONP to load resources, there are some things to keep in mind:

  • You may run into CORS issues (e.g. you won't be able to run the bundled result over file:// protocol in Chrome)
  • Extra HEAD requests are made to determine file-sizes

Package Sidebar

Install

npm i chunk-progress-webpack-plugin

Weekly Downloads

106

Version

2.0.1

License

MIT

Unpacked Size

8.08 kB

Total Files

5

Last publish

Collaborators

  • seansleblanc