DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Kyle Hoskins
Kyle Hoskins

Posted on

How Next.js 12 improved Material-UI app compile by 8X

Some are calling Next.js 12 the "biggest step forward yet." Especially Rust fans.

Next.js 12's new Rust compiler features ~3x faster refresh locally and ~5x faster builds, but that's not the feature that helped me.

The unsung hero of the release for me was...

Compiled module count!

Next.js now outputs Fast Refresh timing in the console for both client and server compilation, including the number of modules and files compiled.

Image description

10,000 Modules * faint *

10,000 is great if we're talking about Outliers πŸ“š, but downright scary 😱 when we're talking about modules.

My application uses Material-UI, but is pretty small, so what happened?!

Take a look:

import Menu from '@mui/icons-material/Menu';
import ChevronRight from '@mui/icons-material/ChevronRight';
import Save from '@mui/icons-material/Save';
Enter fullscreen mode Exit fullscreen mode

versus:

import { Menu, ChevronRight, Save} from '@mui/icons-material';
Enter fullscreen mode Exit fullscreen mode

The shorter one sure looks prettier, and VSCode even suggests importing from @mui/icons-material first, but don't fall for it!

How does it impact the compile time?

// importing from @mui/icons-material
event - compiled successfully in 5.1s (10013 modules)

// importing from @mui/icons-material/ChevronRight
event - compiled successfully in 615ms (1024 modules)
Enter fullscreen mode Exit fullscreen mode

As a first time Next.js user, I did not have a project to compare against to recognize that my compile times were slow until the new module count logging feature.

If you use Material-UI, be sure to replace any instances of direct imports from @mui/material or @mui/icons-material as you will be compiling ALL the modules from the entire packages. Watch out for barrel files too!

With 1,000 modules remaining, I still have some improvements to make, but I figured I'd share for any others who may experience the same shock! How many modules does your Next.js application have?

P.S. Thanks for reading my first DEV article!

Top comments (5)

Collapse
 
ruiguilherme profile image
RuiGuilherme

Is this not a problem with SWC? babel doesn't have this kind of problem because of babel-plugin-transform-imports.

Look this: github.com/vercel/next.js/discussi...

Collapse
 
atemiz profile image
Ahmet Temiz

I'm using top level imports with babel-plugin-import as described in the official docs.

mui.com/guides/minimizing-bundle-s...

Collapse
 
kyleapex profile image
Kyle Hoskins Author

Thanks for sharing! I didn’t know about that, and it looks like a great solution. Going to try it later this weekend!

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
kyleapex profile image
Kyle Hoskins Author • Edited on

Thanks for replying @rangercoder99 . What does β€œNo it does not” refer to?

Starting from the third sentence, you will notice that this article is not about the Rust compiler, but that is good to know about the emotion package.

In defense of the modern web

I expect I'll annoy everyone with this post: the anti-JavaScript crusaders, justly aghast at how much of the stuff we slather onto modern websites; the people arguing the web is a broken platform for interactive applications anyway and we should start over;

React users; the old guard with their artisanal JS and hand authored HTML; and Tom MacWright, someone I've admired from afar since I first became aware of his work on Mapbox many years ago. But I guess that's the price of having opinions.