rollup-plugin-visualizer VS vite-plugin-svgr

Visualizer from "rollup-plugin-visualizer"

I think https://github.com/btd/rollup-plugin-visualizer can help with checking which packages are the largest.

In our "old" build system - I configured webpack-bundle-analyze to inspect bundle chunks and understand what it made of. I added rollup-bundle-visualyzer instead (although there is an issue that the reported size is not correct).

1. Install vite-plugin-svgr

We use the vite-plugin-svgr plugin to convert SVGs to React components. It's as simple as adding the plugin to the Vite config:

You can check out vite-plugin-svgr to learn more about how to install and use svgr() and all the configuration options that it exposes.

If you want to use svg with React components, install vite-plugin-svgr.

We need vite-plugin-svgr in order to import SVGs as React components. For example:

If you're using Vite, then maybe try one of these: - https://github.com/pd4d10/vite-plugin-svgr - https://github.com/vbenjs/vite-plugin-svg-icons

Instead of webpack svgr - vite has a community plugin vite-plugin-svgr. Looking at its source code I can tell that it does the work as needed. In the future, I may want to add more SVGR options (currently for custom colors we use css currentColor property), so I may contribute it or create a similar plugin. NOTE: vite bundles the static svg in addition to assets even if you use vite-plugin-svgr. So many useless files will be generated. This is a minor issue that can be unnoticeable. I created a script for deleting those files (it has 0 impacts on the bundle because the client does not download those chunks).