https://github.com/seleb/chunk-progress-webpack-plugin

Provides runtime progress events by replacing default webpack chunk loading with XHR
https://github.com/seleb/chunk-progress-webpack-plugin

chunk javascript webpack webpack-plugin

Last synced: about 6 hours ago
JSON representation

Provides runtime progress events by replacing default webpack chunk loading with XHR

• Host: GitHub
• URL: https://github.com/seleb/chunk-progress-webpack-plugin
• Owner: seleb
• License: mit
• Created: 2018-05-12T20:29:13.000Z (over 6 years ago)
• Default Branch: main
• Last Pushed: 2021-08-07T05:14:43.000Z (over 3 years ago)
• Last Synced: 2024-10-16T06:01:41.182Z (about 1 month ago)
• Topics: chunk, javascript, webpack, webpack-plugin
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/chunk-progress-webpack-plugin
• Size: 8.79 KB
• Stars: 19
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# chunk-progress-webpack-plugin

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

## Install

```sh

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

```

or

```sh

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

```

## Use

In config:

```js

const ChunkProgressWebpackPlugin = require('chunk-progress-webpack-plugin');

...

{

	plugins: [

		new ChunkProgressWebpackPlugin()

	]

}

```

In application:

```js

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