Browser hangs while navigating through report.

[megaboich]

Issue description

I have quite big report generated for ~4Mb bundle.
While navigating it browser hangs and after time suggests to kill the tab.
This occurs almost immediately in Chrome. In Firefox it lasts a bit longer, but hangs after 3 or 4 navigations. Surprisingly works well in Edge, which shows that this browser could be used at least for something.

Technical info

• Webpack Bundle Analyzer version: 2.2.1
• Webpack version: 2.2.0-rc.3
• Node.js version: v7.2.1
• npm/yarn version: npm 3.10.10
• OS: Windows 10

Debug info

I use it as a plugin to generate static report.

If plugin, what options were provided?

    new BundleAnalyzerPlugin({
        // Can be `server`, `static` or `disabled`.
        // In `server` mode analyzer will start HTTP server to show bundle report.
        // In `static` mode single HTML file with bundle report will be generated.
        // In `disabled` mode you can use this plugin to just generate Webpack Stats JSON file by setting `generateStatsFile` to `true`.
        analyzerMode: 'static',
        // Path to bundle report file that will be generated in `static` mode.
        // Relative to bundles output directory.
        reportFilename: '../reports/bundle-analyzer-report.html',
        // Automatically open report in default browser
        openAnalyzer: false,
        // If `true`, Webpack Stats JSON file will be generated in bundles output directory
        generateStatsFile: false,
        // Log level. Can be 'info', 'warn', 'error' or 'silent'.
        logLevel: 'info'
    })

What other Webpack plugins were used?
I thing that is not relevant

Stats.json attached.
stats.zip

Anyway thanks for awesome tool!

[valscion]

I am not able to reproduce this. Can you test out this static report file whether it hangs? I generated it from your attached stats.json file.
report.html.zip

If this doesn't hang, could you zip over the static HTML report your build created?

[megaboich]

Hi @valscion
Thanks for your effort, you have generated correct file, I can still reproduce issue with it.
Well, I can confirm that I can still reproduce this issue, but only on my laptop running Windows 10.
On my another laptop running Ubuntu this page is working without any problems both in Chromium and Firefox.
Probably this issue is somehow platform-graphic drivers specific because of intensive canvas drawing operations.
Presumably I need to target this issue to drawing diagram component library. Though I am not sure what library is used for drawing this treemap diagram.

[valscion]

An issue with the platform-specific graphic drivers seems very nasty, and also likely.

The library used is a demo variant of some commercial treemap code: https://github.com/th0r/webpack-bundle-analyzer/blob/master/client/vendor/carrotsearch.foamtree.js

I don't know the history of that reporter.

If we'll get to actually implementing #32 we could create a new reporter with another treemap visualizer easily. Hopefully that wouldn't have issues with your graphics drivers.

I don't think there's much we can do to fix your issue, though, sorry 😞

Maybe you could use Edge instead for the visualizer as it seems to work better with your graphics drivers? And also, have you tried updating your drivers, maybe it would help?

[th0r]

Sorry, can't really do anything here but as @valscion noted you'll be able to make your own reporter as soon as we address #32.

[th0r]

@megaboich v2.7.0 partially addresses this performance issue - it allows to choose only some chunks to analyze and hide all others.