Skip to content
This repository has been archived by the owner on Apr 20, 2023. It is now read-only.
/ cra-preact Public archive

Comfort of CRA + preact without ejecting 🔥

License

Notifications You must be signed in to change notification settings

shilangyu/cra-preact

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

⚠️ This project is now archived. You should use Vite with the Preact preset instead. ⚠️

Love the CRA bootstrap? Hate big bundle sizes?

npm i -D cra-preact
# or
yarn add --dev cra-preact

Write your code as if you weren't using preact, continue importing react.

usage

Replace your build, start and test scripts

"scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
+ "start": "cra-preact start",
+ "build": "cra-preact build",
+ "test": "cra-preact test",
  "eject": "react-scripts eject"
}

Cool, done. Now watch the bundle size go down.

bundle size drop porn

initial CRA bootstrap

initial app

medium size real-world production project

middle size

disclaimer

While rare, problems may occur.

  • Please be aware that cra-preact is using preact's compatibility layer (preact/compat) and issues with it should be directed to preact's repo
  • Make sure to develop and test with cra-preact to catch incompatibilities during development
  • This project requires react-scripts v3+
  • It is NOT recommended to plug this into existing projects just as a build script. Incompatibilities will most likely surface during runtime, not compile time
  • Because it relies on fine details in react-scripts any minor upgrade of it might be a breaking change for cra-preact
  • While it works with npm, there are no tests available for npm. Because npm link and npm install don't respect peer dependencies

This whole project was inspired by this github comment.