4 ms·

Talking of bundle sizes, this isn't inherent to the React point being made here but it's arguably too easy to blow up what you're serving. A common example I li

Talking of bundle sizes, this isn't inherent to the React point being made here but it's arguably too easy to blow up what you're serving. A common example I like to reference is Moment[1] — unpacked size is 4MB, most of which is different locales. If you _don't_ want to bundle all of those with your project, you have to do extra work, instead of making locales opt-in. Perhaps slightly less used, but a more prominent example, a widely-used table component Ag-grid[2] is 25MB before being packed down. Instead of being served as a modular set of components, it's mostly a big blob with minimal separation of concerns. The takeaway here is twofold: we need better tooling as well as better practices for how to use those tools. It's both an educational problem as well as a toolset issue. It is possible to build lean and fast pages, but it's currently considerably harder than building gargantuan monsters. I don't see the web bloat problem going away until the dynamic here is flipped — it should be easy to ship small bundles even with minimal experience. [1] https://www.npmjs.com/package/moment https://www.npmjs.com/package/moment [2] https://www.npmjs.com/package/ag-grid-community https://www.npmjs.com/package/ag-grid-community

avasthe 6y ago
Tangentially related; is there no lint option (similar to use strict) in JS yet to ensure no methods / functions are dynamically called and thus allow effective dead code elimination?
- cellularmitosis 6y ago
  Not in vanilla JS. If you use the flavor of JS accepted by google’s closure compiler, then yes.
  - avasthe 6y ago
    If anything, it proves how ineffective standards committees are. Similar to the standard library proposal which seems to be not yet implemented. Still better than C++ standard people who try to cram infinite complexity into 100 layers of templates every three years for sake of adding a feature as library instead of language feature, with utter ignorance towards debug build performance, compile times and error messages. I have lost respect towards them since I read a C++ performance report and didn't see the mention of inherent STL inefficiencies.
andrewingram 6y ago
At my last job I always tried to be quite strict about adding additional dependencies, if something was over 10kb it had to be very strongly justified. Our designers wanted to add some SVG animations, they started off with Lottie (https://bundlephobia.com/result?p=lottie-web@5.7.2 https://bundlephobia.com/result?p=lottie-web@5.7.2) because they could export directly from After Effects, but I said no chance because of its file size. Briefly considered Greensock (https://bundlephobia.com/result?p=gsap@3.5.0 https://bundlephobia.com/result?p=gsap@3.5.0), but it was also too big for the kind of animations we were looking it. I'll need to double check what we ended up with, but it didn't have any library code, so each animation was just a self-contained bundle of SVG and CSS animation code, and fairly small. Edit: I asked around and SVGator (https://www.svgator.com/ https://www.svgator.com/) is what we ended up using.
- RandoHolmes 6y ago
  Too many people don't respect the risk of dependencies.

avasthe 6y ago

Tangentially related; is there no lint option (similar to use strict) in JS yet to ensure no methods / functions are dynamically called and thus allow effective dead code elimination?

cellularmitosis 6y ago
Not in vanilla JS. If you use the flavor of JS accepted by google’s closure compiler, then yes.
- avasthe 6y ago
  If anything, it proves how ineffective standards committees are. Similar to the standard library proposal which seems to be not yet implemented. Still better than C++ standard people who try to cram infinite complexity into 100 layers of templates every three years for sake of adding a feature as library instead of language feature, with utter ignorance towards debug build performance, compile times and error messages. I have lost respect towards them since I read a C++ performance report and didn't see the mention of inherent STL inefficiencies.

andrewingram 6y ago

At my last job I always tried to be quite strict about adding additional dependencies, if something was over 10kb it had to be very strongly justified. Our designers wanted to add some SVG animations, they started off with Lottie (https://bundlephobia.com/result?p=lottie-web@5.7.2 https://bundlephobia.com/result?p=lottie-web@5.7.2) because they could export directly from After Effects, but I said no chance because of its file size. Briefly considered Greensock (https://bundlephobia.com/result?p=gsap@3.5.0 https://bundlephobia.com/result?p=gsap@3.5.0), but it was also too big for the kind of animations we were looking it. I'll need to double check what we ended up with, but it didn't have any library code, so each animation was just a self-contained bundle of SVG and CSS animation code, and fairly small. Edit: I asked around and SVGator (https://www.svgator.com/ https://www.svgator.com/) is what we ended up using.

RandoHolmes 6y ago
Too many people don't respect the risk of dependencies.