Frontend JavaScript Toolchains Trade Off Ease of Adding Dependencies Over Bundle Size

Modern JS toolchains like npm and webpack optimize for ease of adding third-party libraries over keeping bundle size (and page bloat) small.

For example, using aws-sdk by default you end up including the entire library which is a few MB. There are numerous bugs in trying to import parts of the library despite claims of modularity. I needed to find the right tsconfig setting to import it in a certain way, then hack around a bug with importing the Lambda client which involved changing the Webpack configuration to resolve the util module. The default is bloat and requires large effort to reduce bundle size making it unlikely people will do it (convenience is king).

  • Brotli Compression Makes Static Website Assets Significantly Smaller

    Brotli is a compression algorithm developed by Google that is supported by all modern browsers. It can compress files more than gzip (usually ~20% smaller) and seems to better compress large JavaScript files. In my local tests with brotli compression set at 11 a 1.2MB js file was compressed to ~260KB.

  • The Npm Package Ecosystem Is a Chevette

    My dad used to tell me about an old car he used to have—the Chevrolet Chevette. It was an inexpensive compact car with rear wheel drive from the late 70s. As he described it, “all the thrills of high-speed driving at low speeds”.

  • The Default Strategy for Dependencies Should Be to Not Add More

    Adding new dependencies to a codebase is a net positive until it’s not. The added leverage of picking up an off-the-shelf solution eventually gives way to dependency hell—fixing breaking changes, incompatibilities between things, security issues, and so on.