Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Maybe provide tree-shakeable alternative to preact/compat?

See original GitHub issue

I’ve read the release notes for 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:open
  • Created 4 years ago
  • Reactions:10
  • Comments:9 (7 by maintainers)

github_iconTop GitHub Comments

lemonmadecommented, Jan 4, 2021

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 to import React from 'react';, since JSX transformations expected React to be in scope. This made it so tree-shaking of preact/compat could not be effective, since the default export for React has to include all the React APIs. With jsx-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 default React 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 main preact/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 the React default export, even if unused, if it is entirely constructed in the index file. This alternative compatibility library is hosted here: I also prepared a very small project that uses this library and configures Webpack to alias react to the tree-shakeable compat library: When I build that project, the bundle analysis shows that all parts of compat I did not use (PureComponent, findDOMNode, etc) are tree-shaken, and the parts I did use (as named exports, like memo and render) are included in the bundle, alongside the main Preact module and preact/hooks. The tree-shaken compat build was 5.69kb; the preact/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.

robertknightcommented, Apr 16, 2019

Perhaps we could pull utilities like memo and Portal into a separate bundle which preact/compat just re-exports?

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found