(solved) Noob: Build takes incredibly long for a relatively simple app
Answered
Lewis's Woodpecker posted this in #help-forum
Lewis's WoodpeckerOP
I'm an absolute noob with Next, in fact this is my first Next app, so take it easy on me haha.
I have a simple react app. It's a
and when I run btop to see what's going on,
I've tried leaving it running for hours, and deleting
Any ideas?
I have a simple react app. It's a
layout.tsx with a main page.tsx, a not-found.tsx, and three component .tsx files with .module.css files (opted out of Tailwind when using create-next-app). When I run my app (it uses App Router btw, don't know if that matters) using npx next dev, everything works fine, save for some lagging with Font Awesome icons (this is the only 3rd party import that I have in this project btw, and I followed the instructions in the FA docs). When I run npx next build or npx next build --debug, the build process hangs entirely: ▲ Next.js 14.2.5
Creating an optimized production build ...and when I run btop to see what's going on,
jest-worker is taking 2 cores at 100% each and 1.2 G of ram, but the process is sleeping.I've tried leaving it running for hours, and deleting
/.next and /node_modules and reinstalling deps. Any ideas?
Answered by Lewis's Woodpecker
The issue was because I was importing an entire style set into one of my components without realizing it. switching that component to use explicit icon imports fixed the issue.
9 Replies
Lewis's WoodpeckerOP
okay- update- it's working now; extremely slow, but it's working. why would it take this long? elapsed time on the process is almost at an hour
Lewis's WoodpeckerOP
bump
This post is missing a reproduction test (or code share) for us to help.
Can you provide a https://codesandbox.io or https://stackblitz.com reproduction tests?
Can you provide a https://codesandbox.io or https://stackblitz.com reproduction tests?
You need to know that, depending on your dependencies, nextjs can be slow because of the quantity of works needed.
Nextjs has a solution for that: https://nextjs.org/docs/app/api-reference/next-config-js/optimizePackageImports
You can see a list of packages that are optimized by default.
Depending on how Font awesome is built, you can use this trick to strip out unnecessary icons and bundle works
Nextjs has a solution for that: https://nextjs.org/docs/app/api-reference/next-config-js/optimizePackageImports
You can see a list of packages that are optimized by default.
Depending on how Font awesome is built, you can use this trick to strip out unnecessary icons and bundle works
By looking at https://www.npmjs.com/package/@fortawesome/free-solid-svg-icons?activeTab=code
It seems like the optimizePackageImports can work for you
The way optimizePackageImports works is by modifying the import of the dependency
e.g:
By doing that, the size of the file parsed and works for the bundler is reduced, speeding this up
It seems like the optimizePackageImports can work for you
The way optimizePackageImports works is by modifying the import of the dependency
e.g:
import { faAdd } from "@fortawesome/free-solid-svg-icons"
// is changed to
import faAdd from "@fortawesome/free-solid-svg-icons/faAdd"
// by optimizePackageImportsBy doing that, the size of the file parsed and works for the bundler is reduced, speeding this up
Lewis's WoodpeckerOP
i fixed it. it was an issue with font awesome imports. thanks!
Nice! Glad it helps!
Original message was deleted
@Lewis's Woodpecker can you follow this to note as solved instead of editing the title ? 🙂
Lewis's WoodpeckerOP
The issue was because I was importing an entire style set into one of my components without realizing it. switching that component to use explicit icon imports fixed the issue.
Answer