speed up runtime by removing the styled proxy
jantimon opened this issue · 1 comments
jantimon commented
Right now in next-yak
, we use Proxy
to provide the same API like styled components.
It lets devs write code like styled.div
to style any html element tag or even custom elements.
Unfortunately according to https://romgrk.com/posts/optimizing-javascript proxies prevent compiler optimization and therefore might slow down our runtime during SSR and hydration.
As next-yak
compiles the code anyway we can change the components from styled.div`...
to styled("div", ...)
.
jantimon commented
probably we could go a step further:
import { styled } from "next-yak";
const Button = styled.button`...`
could be compiled to (at least for all currently known tags)
import { _styled_button } from "next-yak/internal";
const Button = _styled_button`...`
This would:
- minify even better (
c.button
becomes justn
) - reduce garbage collection as factories stay defined
- dead code eliminate unused tags
- dead code eliminate the proxy (if only known tags are used)