Tree-shaking ready API

Right now library exports one big class with everything inside.

It is bad for website performance because webapp JS bundle will contain all methods of Color.js even if user use only a few of them.

Modern JS bundler has tree-shaking feature. If you will move rare (or all) methods to separated functions with separated export, JS bundler will keep only used functions in the JS bundle.

I am talking about something like:

import { contrast } from 'colorjs.io'

contrast(color)

I understand that this feature requires a full refactoring and will not be implemented soon. Just an idea for better web performance.

Color spaces could be tree-shaked as well. Here is an example from culori.

[LeaVerou]

I mean that OOP is forcing to bloat JS bundle size by adding unnecessary functions to website JS file.

Even if it’s not tree-shakeable, it’s still modular, as in, you can import only the modules you need. Don’t forget that not all users use bundlers.

I think OOP has the same runtime performance.

OOP does not have the same runtime performance at all. I wish it did! When I switched the API locally to use object literals instead of Color instances the performance increase was huge (my benchmark went from 1400ms to 750ms!). There was literally no other change, just not creating Color instances and passing object literals around instead was that much faster.

[ai]

Just to clarify. For bad web perfomance I mean that OOP is forcing to bloat JS bundle size by adding unnecessary functions to website JS file.

I think OOP has the same runtime performance. This issue is addressing loading performance and my dream to have less JS on modern websites.