Compilation takes too much time/ Next JS 14.2.3
Unanswered
American black bear posted this in #help-forum
American black bearOP
When I ran my NextJS app, I could see that around 6,000 modules were compiled before my initial render. I want to know whether these modules belongs to my project or is it due to improper imports?
12 Replies
have you tried out
--turbo for dev yet?(it works for some but not all - those that it does work it is so fast)
@riský (it works for some but not all - those that it does work it is so fast)
American black bearOP
No couldn't implement it as it throws multiple errors. Is there another way?
Hi!
You can use
You can use
@next/bundle-analyzer to analyze what is bundled on your app:// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true'
});
module.exports = withBundleAnalyzer(nextConfig);And when you build
It opens 3 html file:
- one for backend
- one for middleware
- one for the frontend part
ANALYZE=true yarn buildIt opens 3 html file:
- one for backend
- one for middleware
- one for the frontend part
Sun bear
For me (working with windows on hp) it helped to cancel the "hp endpoint service" task via taskmanager
@Julienng Hi!
You can use `@next/bundle-analyzer` to analyze what is bundled on your app:
js
// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true'
});
module.exports = withBundleAnalyzer(nextConfig);
American black bearOP
I am using pdfmake and it is taking too much space. Any ideas how to reduce it? import pdfMake from "pdfmake/build/pdfmake"; ~around 1.3Mb
@Sun bear For me (working with windows on hp) it helped to cancel the "hp endpoint service" task via taskmanager
American black bearOP
I am using linux and no luck with it yet.
You can try in your next.config:
const nextConfig = {
experimental: {
serverComponentsExternalPackages: ['pdfmake'],
},
}@Julienng You can try in your next.config:
js
const nextConfig = {
experimental: {
serverComponentsExternalPackages: ['pdfmake'],
},
}
American black bearOP
But this means it will only be used on the server side, right? I am using pdfmake on the client side as well. So I want to include it anyway, right?
OH, yeah, I guess you are stuck there in that case 🤔 at least until we have a better bundler (turbo) enabled
You can try to isolate that deps in its own file (using React.lazy maybe)