I'm currently working on a large JavaScript SDK project, and my goal is to optimize it for faster loading times and a smaller bundle size. Since this SDK will be embedded by clients, I can't use ESM (which would require the module to be on the same domain as the client). I'm limited to a single bundle that needs to work universally. I've already upgraded to Node v18, enabled tree-shaking, and attempted to generate a flame graph, but it turned out to be quite complex due to the project's size. I'm looking for any additional tips or best practices to make it super fast and further reduce its size!
4 Answers
First off, how big is your SDK? It might help to analyze your dependencies with tools like webpack-bundle-analyzer or vite-bundle-analyzer to see what's taking up space.
Honestly, it's hard to give advice without more details, but I suggest looking for unnecessary dependencies or repetitive code that you can refactor. Also, consider upgrading to a newer version of Node, or exploring alternatives like Deno or Bun.
Have you considered a dual build approach? You could ship an ESM bundle that allows modern sites to load a faster script type, while maintaining an all-in-one UMD for legacy sites. This could really help with loading speed!
Let me give that a shot! Thanks for the suggestion.
The whole project is pure JS with no dependencies at all.