search

whitespace-se / storybook-addon-html

A Storybook addon that extracts and displays compiled syntax-highlighted HTML
Other
95 stars 43 forks source link

feat: Add option to load HTML on-demand #105

Open samoilovd opened 1 year ago

samoilovd commented 1 year ago

The plugin significantly affects page loading performance on large component compositions (2000-3000+ lines of HTML), especially in Storybook 7.0 and 7.1 with on-demand stories loading enabled.

The difference is 2-3s to load page and PNG graphics VS almost instant loading (200-300ms) with disabled plugin.

Would be nice to have an option to load, prettify and transform HTML content only when the plugin's tab is active.

Here is result of 2 pages loading times with plugin enabled (Storybook 7.1):

Screenshot 2023-08-01 at 13 54 48 Screenshot 2023-08-01 at 13 55 10

Same pages with disabled plugin:

Screenshot 2023-08-01 at 13 56 14 Screenshot 2023-08-01 at 13 57 45

Using Google Web Vitals for measurements.

samoilovd commented 1 year ago

Network activity metrics. Cache disabled, empty cache and hard page reload.

Plugin enabled:

  1. 90 requests, 3.8 MB transferred, 10.2 MB resources, Finish: 5.53 s, DOMContentLoaded: 429 ms, Load: 1.02 s
  2. 121 requests, 4.3 MB transferred, 10.6 MB resources, Finish: 2.36 s, DOMContentLoaded: 455 ms, Load: 1.03 s

Plugin disabled:

  1. 89 requests, 3.0 MB transferred, 7.9 MB resources, Finish: 1.47 s, DOMContentLoaded: 147 ms, Load: 689 ms
  2. 120 requests, 3.4 MB transferred, 8.3 MB resources, Finish: 1.11 s, DOMContentLoaded: 148 ms, Load: 788 ms
dejan-cti commented 10 months ago

Yes, I can also confirm that performance significantly drops with this plugin enabled. This really needs to be improved, as it's not usable currently. Btw, I'm using version "@storybook/html": "^6.5.16"