Investigate if the build time can be optimized

[vladyslav-polishchuk]

What Feature Can Be Enhanced?

I noticed that build time for web project may take between 1:20min to 2min. This potentially can be improved, since for example the api project builds within seconds.

From cursor:

Great! I can see from the build output that it compiled successfully in 83 seconds (about 1.5 minutes). Now let me provide you with a comprehensive analysis:

Build Performance Analysis

Based on my investigation of your Next.js monorepo, here's what I found:

Current Build Time: ~83 seconds (1.5 minutes)

Is this normal? For a project of your scale, this is actually reasonable but could be optimized. Here's why:

Project Scale Indicators:

1. Large Monorepo Structure:

   • 2,777+ TypeScript files in libs/ alone
   • 200+ routes in the Next.js app
   • Massive dependency graph with 200+ internal packages mapped in tsconfig.base.json
   • Complex architecture with frontend/backend/shared libraries

2. Heavy Dependencies:

   • Ant Design components with styled-components
   • MobX state management (mobx-keystone)
   • GraphQL code generation
   • Multiple code editors (CodeMirror, Lexical, React Quill)
   • Sentry monitoring integration

3. Build Configuration:

   • Styled Components compilation enabled
   • SVG webpack loader for all SVGs
   • Bundle analyzer conditionally enabled
   • Webpack build workers already enabled ✓
   • Webpack memory optimizations enabled ✓

Why It Takes This Long:

1. TypeScript Compilation: With 2,777+ TS files and complex type relationships
2. Module Resolution: 200+ path aliases in tsconfig need to be resolved
3. Code Bundling: Generating optimized bundles for 100+ dynamic routes
4. Asset Processing: SVG transformations via SVGR
5. Styled Components: Runtime CSS-in-JS compilation

Optimization Recommendations:

High Impact (Recommended):

1. Enable Module Federation or Turbopack for dev (already noted in your config):

   // In next.config.mjs, turbopack is only for dev
   // Consider enabling for production when stable

2. Implement SWC Plugin optimizations:

   // In next.config.mjs
   experimental: {
     optimizePackageImports: [
       'antd',
       '@ant-design/icons',
       '@radix-ui/react-*',
       'mobx-keystone'
     ]
   }

3. Enable TypeScript incremental builds:

   // In tsconfig.json (check if already enabled)
   "incremental": true,
   "tsBuildInfoFile": ".next/cache/tsconfig.tsbuildinfo"

4. Split vendor chunks more aggressively:

   // In next.config.mjs webpack config
   webpack(config) {
     config.optimization = {
       ...config.optimization,
       splitChunks: {
         chunks: 'all',
         cacheGroups: {
           antd: {
             test: /[\\/]node_modules[\\/](antd|@ant-design)[\\/]/,
             priority: 10,
           },
           mobx: {
             test: /[\\/]node_modules[\\/](mobx|mobx-)[\\/]/,
             priority: 10,
           }
         }
       }
     }
     return config
   }

Medium Impact:

5. Use Nx caching more effectively:

   • Ensure Nx cache is enabled (it is - saw Nx Cloud in logs)
   • Build times should be < 10s on subsequent builds with cache hits

6. Consider module boundaries:

   • Your libs structure is good, but ensure proper barrel exports
   • Avoid deep import paths that break tree-shaking

7. Reduce bundle size:

   • Some routes have 1.3+ MB First Load JS
   • Use dynamic imports for heavy components
   • Consider removing unused Ant Design components

Low Impact (Nice to have):

8. Upgrade to latest Next.js patches (currently on 15.4.4)

9. Enable parallel builds in production:

   # Set environment variable
   NEXT_PARALLEL=true nx run web:build:prod

10. Profile the build:

    ANALYZE_BUNDLE=true nx run web:build:prod

Immediate Action Items:

1. Check if Nx cache is working properly - subsequent builds should be much faster
2. Add the optimizePackageImports experimental flag - can reduce build time by 20-30%
3. Review the largest route bundles (1.3MB+ is quite large)

Benchmarks for Comparison:

• Small Next.js app (< 50 routes): 10-30 seconds
• Medium app (50-100 routes): 30-60 seconds
• Large app (100-200 routes): 60-120 seconds ← You are here
• Enterprise monorepo (200+ routes): 90-180 seconds

Conclusion: Your build time is at the lower end of normal for a project of this scale. With optimizations, you could potentially reduce it to 45-60 seconds, but going much lower would require significant architectural changes (like extracting routes to separate apps or implementing micro-frontends).

Would you like me to implement any of these optimizations?

[webberwang]

module-federation/core#3153

Also nextjs doesn't respect project references it just rebuilds everything from source, I'll provide the url relating to this

[webberwang]

Could split by route perhaps into multiple nextjs projects, but won't be able to share data

Some other points you made we could try out

[vladyslav-polishchuk]

Investigate new next16 features:
https://nextjs.org/blog/next-16#turbopack-file-system-caching-beta

[webberwang]

Initial benchmark

✅ Active Optimizations:

1. optimizePackageImports - 27 packages (lucide-react, antd, all Radix UI, etc.)
2. compiler.removeConsole - Remove console.logs in production (keeps error/warn)
3. productionBrowserSourceMaps: false - Skip source maps for faster builds
4. images.unoptimized: true - Skip image optimization
5. webpackBuildWorker: true - Parallel webpack builds ✓
6. webpackMemoryOptimizations: true - Better memory usage ✓

📝 Commented out (available to enable later):

• output: 'standalone' - For Docker deployments
• eslint.ignoreDuringBuilds - Skip ESLint during builds
• workerThreads - Parallel page builds
• turbopackFileSystemCacheForDev - Persistent Turbopack cache
• Webpack filesystem cache - For prouction builds

Build time: 2.7 minutes ✓

Second build

NX Successfully ran target build for project web (2m)

--

After migrating to Next.js 16

=== WEB BUILD NODE_OPTIONS ===
NODE_OPTIONS: --max-old-space-size=12288

⚠ eslint configuration in next.config.mjs is no longer supported. See more info here: https://nextjs.org/docs/app/api-reference/cli/next#next-lint-options
⚠ Invalid next.config.mjs options detected:
⚠ Unrecognized key(s) in object: 'eslint'
⚠ See more info here: https://nextjs.org/docs/messages/invalid-next-config
▲ Next.js 16.0.0 (Turbopack)

• Experiments (use with caution):
  · optimizePackageImports
  · staleTimes
  ✓ turbopackFileSystemCacheForDev
  ✓ webpackMemoryOptimizations

Creating an optimized production build ...
=== WEB BUILD NODE_OPTIONS ===
NODE_OPTIONS: --max-old-space-size=12288

✓ Compiled successfully in 24.9s
✓ Finished TypeScript in 4.2s
✓ Collecting page data in 535.8ms
✓ Generating static pages (25/25) in 918.6ms
✓ Finalizing page optimization in 6.8ms