Be mindful of your JS package bundle sizes
This is going to be a short post, and I've probably already said this before, but I think it's important to be mindful of your JS package bundle sizes.
When using tools like Rollup, Webpack, etc, they try to include all the relevant code and assets you need for an application. If you're using an NPM package, it's quite possible that your bundle contains more code than you need, because of the way NPM packages work.
How to check your bundle size
There are a number of tools you can use to check your bundle size.
How to know what to remove?
Images and Assets these days, tend to be included in the bundle. It's no longer cool to use the img tag to include images in your HTML like:
<img src="path/to/image.svg" alt="Image" />
Instead, you're encouraged to use the import statement like:
import MySVG from './path/to/image.svg';
This is great, but it's not the end of the story. The image is still included in the bundle, so if it's too large, it will bloat your bundle size.
I recently replaced a GIF with a scaled down version that reduced its size from 3.3MB to 286KB. It didn't need to be so large, and tbh didn't need to be in the bundle at all, but that's a problem for another day.
Dependencies should be tree-shakable
Many NPM packages are not tree-shakable, and will include all their dependencies in the bundle. This is a problem, because it bloats your bundle size. Some SVGs libraries are notorious for this, so you include one SVG and now you have a +2MB bundle size. When you encounter this, it's probably better to either just use the img tag, or include just the SVGs you need without using the NPM package..
Conclusion
I'm not saying you should remove all the images and assets from your bundle, but you should be mindful of the size of the bundle. If you're using an NPM package, it's quite possible that your bundle contains more code than you need, because of the way NPM packages work.
