webpack-bundle-analyzer VS vite-plugin-svgr

Analyze Bundle Size: Use tools like webpack-bundle-analyzer to analyze and reduce your JavaScript bundle size. This can help identify large dependencies that may be slowing down your app.

- `npm run start` - Start the app - `npm run lint` - Lint the project - `npm run test` - Run unit tests - `npm run build` - Build the project - `npm run build:prod` - Build the project in production mode - `npm run build:prod:stats` - Build the project in product mode with stats - `npm run analyse` - Analyse bundle with [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) - `npm run compodoc` - Generate [compodoc](https://github.com/compodoc/compodoc) documentation - `npm run version` - Generate changelog - `npm run prettier` - Format the whole project - `npm run audit` - Audit this application using Sonatype OSS Index

If you're using Webpack for bundling your app, there's the very well known webpack-bundle-analyzer which comes as a webpack plugin that you need add in your webpack config file in order to use it.

Then, with the Webpack Bundle Analyzer plugin, we discovered problematic areas in bundles. Bundle Analyzer highlighted our biggest bundles – client-location and map-with-flashing-dots

I used to use webpack-bundle-analyzer but we have switched the builder to browser-esbuild now.

First start by running a webpack bundle analysis to see what exactly is bundled. You might be surprised about things being included that you didn't expect which can help with where to look.

Firstly I recommend taking a look at the structure of the webpack output with something like webpack-bundle-analyzer for any obvious over bundling issues.

See: https://github.com/webpack-contrib/webpack-bundle-analyzer

Webpack Bundle Analyzer

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).