search

popeindustries / lit

Fast server-rendering and client-hydration of lit-html templates and web components
MIT License
33 stars 4 forks source link

Reduce bundle size #38

Open AndersCan opened 1 year ago

AndersCan commented 1 year ago

This issue may perhaps be irrelevant for what this project is trying to achieve, so feel free to close.

I am making an app where I want the bundle to be as small as possible (as always). I noticed that the bundle size difference between import { render } from '@popeindustries/lit-html'; and import { render } from 'lit-html'; was quite large

image

Can be tested here: https://stackblitz.com/edit/lit-html-pope-lit?file=src%2Fplain-lit.ts&view=editor with npm run build (minify is set to false so that the /dist contents can be read)

Looks like the pope version contains hydration logic and, what I assume to be a reactive-controller. Is it possible to remove this or should I just use plain lit-html as I do not require any additional logic?

popeindustries commented 1 year ago

There are a couple things happening here:

  1. the @popeindustries/lit-html render() function is actually render() + hydrate() combined, so most of the "bloat" here is due to hydration logic
  2. the lit-html source code is minified/mangled for production, and due to the necessity for access to private properties, @popeindustries/lit-html needs to vendor an unminified version of lit-html for hydration support, and does not ship a minified version for production (though this would be possible, but maybe an application concern?)

Maybe a better alternative to 1. would be to export a renderOrHydrate() in addition to a non-hydrating render(). As for 2., I have opened an issue to hear if it would be possible to get public access to hydration APIs so I can drop the vendoring business altogether.