Managing assets
Hey everyone, I kinda hit a wall so I need some help from You awesome people.
At work we run a monorepo with two Next JS apps (deployed with Vercel) and a UI library. It got to a point where one of our apps has a 2MB initial load JS bundle and around 1MB additional code for every route. There's lots of code but we also have A LOT of SVG assets so I'm guessing it's partly due to them. Previous devs just put the assets alongside code (not even in /public) and just ran with it. I was wondering how You guys run assets in React apps (client-side mostly but I guess it doesn't matter).
My idea for now is to move all assets to one of the two apps /public directory and create some utilities for using them directly in components of these apps. SVGs used in UI library components will be directly in code (so they don't depend on any unrelated service). I was also thinking of using react-inlinesvg for SVGs that require some modification (I ran some tests and it seems it's internal cache doesn't work - for the same asset it sends another request and you can see a wave of loading images).
What do You guys think about this? Do You have any experience with managing lots of SVGs? How do UI libraries do this somewhat efficiently?
At work we run a monorepo with two Next JS apps (deployed with Vercel) and a UI library. It got to a point where one of our apps has a 2MB initial load JS bundle and around 1MB additional code for every route. There's lots of code but we also have A LOT of SVG assets so I'm guessing it's partly due to them. Previous devs just put the assets alongside code (not even in /public) and just ran with it. I was wondering how You guys run assets in React apps (client-side mostly but I guess it doesn't matter).
My idea for now is to move all assets to one of the two apps /public directory and create some utilities for using them directly in components of these apps. SVGs used in UI library components will be directly in code (so they don't depend on any unrelated service). I was also thinking of using react-inlinesvg for SVGs that require some modification (I ran some tests and it seems it's internal cache doesn't work - for the same asset it sends another request and you can see a wave of loading images).
What do You guys think about this? Do You have any experience with managing lots of SVGs? How do UI libraries do this somewhat efficiently?
