Tradeoffs

I’ve heard that engineering is a series of tradeoffs, but never experienced much of it because as a junior engineer a lot of the trade offs have been hashed out by a senior engineer and you’re just there learning how to build software. However in this project we have no senior engineers. We are all early in our careers with some experience under our belts so when we take on a task we have to make the decisions ourselves. This past week I worked on configuring our front end build to exclude a package from our build called zxcvbn because the library is 800KB which is very large. In place of adding the library to the app bundle, we wanted to use a CDN to serve the library.

Through this process I learned configuring Vite. I learned about the different formats Vite can bundle JS code into. By default it use ES modules because it is most efficient. It is able to remove unused code, which is called tree shaking, and it doesn’t need to support different module formats like CommonJS or Asynchronous Module Definition. However ES module doesn’t work in this case because we are using a CDN. Using the CDN requires us to access zxcvbn from the global variable which ESM does not support. Instead I needed to use the UMD aka Universal Module Definition format in order to access the global variable for zxcvbn. Since UMD can support global variables and it can support other formats like AMD and CommonJS, it means that bundle sizes could potentially be larger than ESM. However when I did a comparison between ESM and UMD the bundle sizes were quite similar, but even if the UMD bundle was larger, if wasn’t 800KB larger, it would still be better than bundling zxcvbn into the bundle. I learned that just because there is a solution for the problem doesn’t mean that solution comes for free. UMD is necessary for the problem we were facing, but it comes at a cost of large bundle sizes and allowing global variables which ESM does not. We were weighing this tradeoff against potentially an even larger bundle so in the end it made sense to use UMD format.

I can imagine as we grow into our careers and are faced with problems like this being able to figure what the trade offs are will be very important. We need to be clear what the goal is and optimize the solution to that goal.