(feat/perf) Allow vite-plugin-vue-devtools to load only on inspection/fine control features
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 2.9k
- Forks
- 279
- PR merge metrics
- No merged PRs in 30d
Description
Here's my usecase: I have a rather big and complex project with a ton of components.
It works flawlessly until I open the DevTools browser extension. From this, it becomes a rather slow, but that's expected. I can debug what's wrong and reload the page when I'm done to go back to a performant state.
The problem is that the Firefox extension is not updated anymore (still in 7.7.7) and I find the Vite plugin really cool. My problem is when I use it, it directly loads in the browser, so my project is in the slow state from the start.
My suggestions:
- Make the plugin load after a shortcut, or when we click on the little "V", so that by default it's not injected and the app is performant. For now, I have to comment the
vueDevTools()line on myvite.config.tsfile to disable it, and have to reload with the line commented out when I want to debug. - Make it possible to disable some feature. I suspect things like the timeline can make it slow. 99% of the time, I only use the component inspection, so if I could only enable this feature, this could be easier to work with.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the vite.config.ts entry where vueDevTools() is configured, then trace how the plugin is injected into the browser. Define how inspection activation and selective features should be controlled; done means the plugin does not impose its normal overhead by default and users can enable the inspection features they need.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- devtools, performance
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100