Hey hey๐ let's get started on this quickly, in this note you can find a way to optimize your build size by 38% with just a lib install and 5 lines of code.
What is Preact?
According to his website, Preact is a Fast 3kB alternative to React with the same modern API. Basically overrides a lot of the methods that use React, like render
for example, and optimize it at build-time.
Optimize Next.js build with Preact
Install Preact
yarn add preact
ornpm i preact
Create a
next.config.js
if you don't already have one in the root of your project
touch next.config.js
Add the next code or adapt your previous config
module.exports = {
webpack(config, { dev, isServer }) {
// ${previousConfig...}
// Replace React with Preact only in client production build
if (!dev && !isServer) {
Object.assign(config.resolve.alias, {
react: "preact/compat",
"react-dom/test-utils": "preact/test-utils",
"react-dom": "preact/compat",
})
}
return config
},
}
Ready ๐
Top comments (2)
I'm using Preact, and my page ain't even loading, Preact was good for my Portfolio Website
Question, if we add preact/compat then we lose the whole purpose of preact and it's 3kb size. Is this really the solution?