Skip to content

Commit

Permalink
Add default modularizeImports that breaks up lucide-react, mui/icons-…
Browse files Browse the repository at this point in the history
…material, lodash, react-bootstrap (#50900)

## What?

Adds a default modularizeImports that ensures `lucide-react`, `@mui/icons-material`, `lodash`, and `react-bootstrap` do not cause a massive amount of modules to be compiled in development.
For example `@mui/icons-material` re-exports 10600 (10K+) modules from a single file. Even though it does not affect production bundle size it does affect build time, especially in development, and even more so when your filesystem is slow (e.g. what we're seeing on Windows). 

Related issue: #48748 (not closing)




Co-authored-by: Shu Ding <[email protected]>
  • Loading branch information
timneutkens and shuding authored Jun 23, 2023
1 parent fb79c11 commit 0a4b6ef
Showing 1 changed file with 34 additions and 0 deletions.
34 changes: 34 additions & 0 deletions packages/next/src/server/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -673,6 +673,40 @@ function assignDefaults(
}
}

const userProvidedModularizeImports = result.modularizeImports
// Unfortunately these packages end up re-exporting 10600 modules, for example: https://unpkg.com/browse/@mui/[email protected]/esm/index.js.
// Leveraging modularizeImports tremendously reduces compile times for these.
result.modularizeImports = {
...(userProvidedModularizeImports || {}),
// This is intentionally added after the user-provided modularizeImports config.
'@mui/icons-material': {
transform: '@mui/icons-material/{{member}}',
},
'@mui/material': {
transform: '@mui/material/{{member}}',
},
'date-fns': {
transform: 'date-fns/{{member}}',
},
lodash: {
transform: 'lodash/{{member}}',
},
'lodash-es': {
transform: 'lodash-es/{{member}}',
},
// TODO: Enable this once we have a way to remove the "-icon" suffix from the import path.
// Related discussion: https://github.com/vercel/next.js/pull/50900#discussion_r1239656782
// 'lucide-react': {
// transform: 'lucide-react/dist/esm/icons/{{ kebabCase member }}',
// },
ramda: {
transform: 'ramda/es/{{member}}',
},
'react-bootstrap': {
transform: 'react-bootstrap/{{member}}',
},
}

return result
}

Expand Down

0 comments on commit 0a4b6ef

Please sign in to comment.