search

webpack-contrib / webpack-bundle-analyzer

Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap
MIT License
12.58k stars 488 forks source link

HMR hangs for a couple of seconds when use BundleAnalyzerPlugin in development mode #424

Closed constgen closed 1 year ago

constgen commented 3 years ago

Issue description

When BundleAnalyzerPlugin is not used in Webpack config, HMR reloads React components almost immediately. But just adding BundleAnalyzerPlugin to the config adds several extra seconds to the webpage to react on Hot Module Replacement. Can we some how make operations of this plugin async in case of HMR?

valscion commented 3 years ago

Hi, thanks for opening an issue ☺️

As for your question, I unfortunately have no idea what "making operations of this plugin async in case of HMR" could look like. Would you happen to be able to find any example of a webpack plugin that would allow such behavior?

constgen commented 3 years ago

I have nave faced anything like this. But may be on initial build it should work as it is now, but on the next incremental re-build this plugin can call callback() immediately and then do its job without blocking the thread. We need it in the watch mode just to livereload the webserver with the bundle analyzes chart. But it not necessarily needs to block the main thread where the application is built.

valscion commented 3 years ago

I'm not sure if that's possible to do without throwing away the "bundle analyzer UI updates automatically after compilation" feature here.

constgen commented 3 years ago

I would like to investigate it. Can you give me some hints? Is this true that "bundle analyzer UI updates automatically after compilation" feature works on HMR client and is triggered by the Webpack itself but not this plugin?

th0r commented 3 years ago

@constgen this callback is called on every bundle recompilation. So, for analyzerMode: 'server' it calls startAnalyzerServer method which calls updateChartData method to push changes to the client via websocket.