Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bundle size: SSR w/ getComputedStyle #173

Closed
ricokahler opened this issue Sep 21, 2020 · 3 comments
Closed

Bundle size: SSR w/ getComputedStyle #173

ricokahler opened this issue Sep 21, 2020 · 3 comments
Labels
help wanted Extra attention is needed

Comments

@ricokahler
Copy link
Owner

This lib used to be around 1.5kB in size because it deferred parsing colors to getComputedStyle instead of relying on javascript. This saves around 1kB because we can remove the compressed color map of named colors.

This implementation was removed in favor of a plain JS implementation because getComputedStyle does not work in SSR environments and attempts for conditionally imports did not pan out.

This issue exists to find a code path that works for both SSR and non-SSR environments and removes the named color map to get us back down to 2k

@ricokahler ricokahler added the help wanted Extra attention is needed label Sep 21, 2020
@ricokahler ricokahler changed the title SSR w/ getComputedStyle Bundle size: SSR w/ getComputedStyle Sep 21, 2020
@ricokahler
Copy link
Owner Author

I was working on another project where dead code elimination is required in the next.js land and it seems like they partially do dead code elimination by:

  1. using babel-transform-define to statically transformwindow typeof to either 'undefined' or 'object' depending on the environment.
  2. Relying on Terser to pre-evaluate and shake the expression in the conditions of code branches (e.g. if ('object' !== 'undefined')) out of the code due to the expression always being false (or something similar).

This is a very interesting approach. My previous attempts relied on conditionally requireing a compat package assuming the environment server-rendering wasn't sandboxed but this quickly fell apart when trying this out in Gatsby and Next.js.

I think if enough environments can support checking typeof window === 'undefined' for server code elimination, we might be able to ship a 1.5kB v2.

I'd happily accept PRs and experiments for this idea. Let me know if you're interested!

@ricokahler
Copy link
Owner Author

Related Next post: vercel/next.js#5354 (comment)

@ricokahler
Copy link
Owner Author

Closing. This lib will prefer stability and compatibility over this 1kB of bundle size savings

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

1 participant