These lines (i.e., the mentioned one and lines, e.g., to reference an image) are totally unnecessary. You anyway use a bundler. Configure the bundler to inline the resources as base64 data URLs. The result will be also faster as you don't need to go over the extension bridge; it's already loaded (and don't forget - files are anyway served through the bridge).
In general I'd also recommend CSS-in-JS for VS Code extensions. It's just a much simplified / improved DX and you don't get any perf hit as JS is running anyway + it's all coming from local bridge.
Besides that - nice article!
Check out the Piral VS Code extension if you want to see how such tricks can be applied (and more): github.com/smapiot/vscode-piral
AI FullStack Developer 🚀 | 3+ year development and industrial experience | Expert in JavaScript, Typescript, Next JS, Node.js | Building solutions for problems. | Exploring New Tech Daily
Actually after going through all these bundlers webpack, babel, rollup, I found parcel the fastest.
Although I don't have much depth knowledge in parcel but CSS-in-JS was only available for CSS not Tailwind. For Tailwind there was a sperate section, for sure looking forward to learning it.
Thanks for suggesting, I will keep that in mind onwards. 👨💻
Actually after going through all these bundlers webpack, babel, rollup, I found parcel the fastest.
Hm, not sure if you wanted to write that to my comment? I never questioned that. But now that you bring it up - it's not. If you care about performance you'd pick either Vite, rspack, or esbuild. The last one is certainly the most performant, but comes with the least DX - however, sufficiently enough for that scenario.
CSS-in-JS is quite bundler independent. After all - the only thing you need is JS (every web bundler handles JS).
AI FullStack Developer 🚀 | 3+ year development and industrial experience | Expert in JavaScript, Typescript, Next JS, Node.js | Building solutions for problems. | Exploring New Tech Daily
These lines (i.e., the mentioned one and lines, e.g., to reference an image) are totally unnecessary. You anyway use a bundler. Configure the bundler to inline the resources as base64 data URLs. The result will be also faster as you don't need to go over the extension bridge; it's already loaded (and don't forget - files are anyway served through the bridge).
In general I'd also recommend CSS-in-JS for VS Code extensions. It's just a much simplified / improved DX and you don't get any perf hit as JS is running anyway + it's all coming from local bridge.
Besides that - nice article!
Check out the Piral VS Code extension if you want to see how such tricks can be applied (and more): github.com/smapiot/vscode-piral
Actually after going through all these bundlers webpack, babel, rollup, I found parcel the fastest.
Although I don't have much depth knowledge in parcel but CSS-in-JS was only available for CSS not Tailwind. For Tailwind there was a sperate section, for sure looking forward to learning it.
Thanks for suggesting, I will keep that in mind onwards. 👨💻
Hm, not sure if you wanted to write that to my comment? I never questioned that. But now that you bring it up - it's not. If you care about performance you'd pick either Vite, rspack, or esbuild. The last one is certainly the most performant, but comes with the least DX - however, sufficiently enough for that scenario.
CSS-in-JS is quite bundler independent. After all - the only thing you need is JS (every web bundler handles JS).
Thank you sir 🫡, I'll keep that in mind