## Problem
During development, certain modules can take an unexpectedly long time
to compile, significantly impacting build performance. Currently,
developers have no visibility into which modules are causing these
slowdowns, making it difficult to optimize their codebase.
## Solution
This PR introduces a new experimental feature that detects and reports
modules that are slow to compile during webpack builds. When enabled,
it:
- Tracks build time for each module
- Reports modules that exceed a configurable time threshold
- Shows a dependency tree visualization of slow modules
- Helps developers identify performance bottlenecks in their build
process
### Configuration
Enable in `next.config.js`:
```js
module.exports = {
experimental: {
slowModuleDetection: {
buildTimeThresholdMs: 500, // Time threshold to consider a module "slow"
}
}
}
```
### Example Output
## Implementation Details
- Implements a new webpack plugin (`SlowModuleDetectionPlugin`) that
hooks into the compilation process
- Uses webpack's module graph to build a dependency tree of slow modules
- Provides clear, actionable output to help developers optimize their
builds
- Adds comprehensive error handling with detailed error messages
- Includes e2e tests to ensure reliability
## Limitations
- **To ensure accurate measurements, we will set the
[parallelism](https://webpack.js.org/configuration/other-options/#parallelism)
option to 1 in the Webpack configuration (see [Webpack
documentation](https://webpack.js.org/configuration/other-options/#parallelism))
when the feature is enabled. This may significantly slow down
development performance, but it will help surface issues proportionally
to their normal duration.**
- Currently only supports webpack builds. Turbopack support will be
added in a future PR
- Only tracks module build time, not other compilation steps
- Thresholds may need tuning based on project size and complexity
https://linear.app/vercel/issue/NDX-86/slow-module-detection
Tim Neutkens