Maybe provide tree-shakeable alternative to preact/compat?
See original GitHub issueI’ve read the release notes for 10.0.0-alpha.0 (https://github.com/developit/preact/releases/tag/10.0.0-alpha.0) where you say that
preact/compat […] still has both named and a default export to remain compatible with react
I absolutely get that, but some of the functions in compat can actually be useful on their own! Yesterday, I wanted to use memo
, but it more than doubled my bundle size because now I was importing all of compat. (I then copied just memo
into my codebase, but I don’t think that’s necessarily the best way to go about this. 😄)
Do you think there may be value in providing some of the functions on their own? Maybe something like
import { memo } from 'preact/utils'
On first look, these functions could be especially useful on their own:
- Portal
- PureComponent
- memo
Issue Analytics
- State:
- Created 4 years ago
- Reactions:10
- Comments:9 (7 by maintainers)
Top Results From Across the Web
Maybe provide tree-shakeable alternative to preact/compat?
I absolutely get that, but some of the functions in compat can actually be useful on their own! Yesterday, I wanted to use...
Read more >Switching to Preact (from React)
The preact/compat package provides all the necessary tweaks on top of Preact's core to make it work just like react and react-dom ,...
Read more >Tree shake Lodash with Webpack, Jest and Typescript
Our stack used at that particular project is following: preact + preact-compat ( renderer ); redux + redux-observable + rx ( state management...
Read more >How to write a tree-shakable component library
ES Modules make it possible for bundlers to tree-shake your code. ... this will give you backwards compatibility, but without tree-shaking ...
Read more >Is webpack including whole React library or only what is ...
Those libraries are React, Preact and Svelte. Knowing that every library that I ... I don't believe React itself is tree-shakable, sadly.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
It would be great if this issue could be reconsidered. Up until React 17, where the
react/jsx-runtime
module was added, most modules had toimport React from 'react';
, since JSX transformations expectedReact
to be in scope. This made it so tree-shaking ofpreact/compat
could not be effective, since the default export forReact
has to include all the React APIs. Withjsx-runtime
, though, it can be much easier for packages to be written entirely against React, but using only named imports. I am working on a framework that I want to support React and Preact, and removing all usage of the defaultReact
import was not too tricky.To test out that this will actually make a difference, I created an alternative version of
preact/compat
that moves all values out of the mainpreact/compat/index.js
file, including the default export. The index file just re-exports all of these files; this change is needed for tree-shaking since Webpack doesn’t, at least by default, remove theReact
default export, even if unused, if it is entirely constructed in the index file. This alternative compatibility library is hosted here: https://github.com/lemonmade/quilt/tree/main/packages/preact-mini-compat. I also prepared a very small project that uses this library and configures Webpack to aliasreact
to the tree-shakeable compat library: https://github.com/lemonmade/preact-mini-compat. When I build that project, the bundle analysis shows that all parts ofcompat
I did not use (PureComponent
,findDOMNode
, etc) are tree-shaken, and the parts I did use (as named exports, likememo
andrender
) are included in the bundle, alongside the main Preact module andpreact/hooks
. The tree-shaken compat build was 5.69kb; thepreact/compat
build was 6.89kb. Not much, but if any library would do the work to get that bundle size reduction, I assume it is going to be Preact 😄Quick note: I made the tree-shakeable library very quickly, so it might not actually work in practice. The concept is certainly workable, as shown by the builds, but I didn’t do things like preserving Preact’s property name mangling, so I assume some things would break if you actually used this compatibility library right now.
Perhaps we could pull utilities like
memo
andPortal
into a separate bundle whichpreact/compat
just re-exports?