search

nuxt / devtools

Unleash Nuxt Developer Experience
https://devtools.nuxt.com
MIT License
2.81k stars 154 forks source link

feat: Performance tab with Web Vitals integration #594

Closed Baroshem closed 5 months ago

Baroshem commented 5 months ago

🆒 Your use case

Having up to date info about the performance of the page (even in development) can be really useful. There is a module https://www.npmjs.com/package/@nuxtjs/web-vitals that integrates with the npm package with the same name that allows to display the values of the web vitals inside your console tab.

🆕 The solution you'd like

I would love to see similar functionality in the devtools so that the users could observe there what are the current values of the metrics.

image

🔍 Alternatives you've considered

Not really. The alternative is to use the Web Vitals

ℹī¸ Additional info

Apart from just getting the values of metrics, w could also display some hints on what user could do to improve the value of certain metric.

Baroshem commented 5 months ago

I can try to implement it if you like the idea :)

antfu commented 5 months ago

Sounds like a nice idea! Since we have the web-vital module, I guess it would be better to have the devtools integrations in the module directly.

Baroshem commented 5 months ago

So you would recommend to implement this as a part of the Web Vitals module, not the new tab in the devtools?

antfu commented 5 months ago

Modules could extend DevTools tabs: https://devtools.nuxt.com/module/guide, users would see the tab only when the module is installed. A lot of modules are doing this way

Baroshem commented 5 months ago

Yeah yeah, I understand that.

But in general, you would recommend to have this Performance tab only visible when a user has this module installed?

antfu commented 5 months ago

To me, it's not about when it is visible, it is about the scoping. If Nuxt has Web Vital built-in, then it makes sense to have it built in Nuxt DevTools. You can argue that there are a lot of things that are crucial to web development that might be worth including by default, like a11y, i18n, SEO, sitemaps, PWA..., and a lot of things. But it turns out that's the point of having modules - to allow each integration to be scoped and composed, while also allows different solutions and opinions to coexists.

Baroshem commented 5 months ago

Makes sense!

I will create an issue in the module repository then :)