This plugin would record all your webpack assets' size and attach them to your index.html,
so make sure your project's output includes a index.html, and it should have a <body></body> tag, then the plugin would inject the records here.
One best practice is to use HtmlWebpackPlugin, which would generate a index.html file.
install plugin
yar:n add -D webpack-chunk-progressadd plugin to webpack config
const WebpackChunkProgress = require('webpack-chunk-progress')
module.exports = {
//...
plugins: [
new WebpackChunkProgress(),
// ...
]
}where you want to load a chunk:
function onProgress(progress) {
console.log(progress)
document.getElementById('react-app').innerText = Math.round(progress * 100) + '%'
}
import {load} from 'webpack-chunk-progress/lib/helper'
load(() => import(/* webpackChunkName: 'app' */'./app/index.js'), 'app', onProgress).then(module => {
/*use your module*/
module.default()
})the load function takes 3 args, they are:
- webpack loader function, you need to specify a
NamedChunk - chunkName, same as the chunk name you specified in arg 1.
- the onProgress function
This plugin would replace the default chunk loading function(JSONP) used in Webpack with XHR request, in order to provide progress when loading a chunk, that means, CORS problems may occur if some related headers aren't set.
In development, especially when you are using a webpack-dev-server, for some reason, you need to disable the gzip option to make this plugin work.