Skip to content

Commit

Permalink
Adjust lib chunk naming algorithm and prevent duplicate react-dom (#8450
Browse files Browse the repository at this point in the history 
)

* Adjust lib chunk naming algorithm and prevent duplicate react-dom

* Remove alias for react-dom and update separator replacement logic

* Add comment to webpack-config
  • Loading branch information
@atcastle @Timer
atcastle authored and Timer committed Aug 22, 2019
1 parent 3e91232 commit 3896cbe
Showing 1 changed file with 12 additions and 7 deletions.
19 changes: 12 additions & 7 deletions packages/next/build/webpack-config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -220,6 +220,9 @@ export default async function getBaseWebpackConfig(
default: false,
vendors: false,
framework: {
// Framework chunk applies to modules in dynamic chunks, unlike shared chunks
// TODO(atcastle): Analyze if other cache groups should be set to 'all' as well

This comment has been minimized.

Sign in to view

Copy link
@evocateur

evocateur Aug 22, 2019

I would argue the only chunks that need 'initial' are commons and shared, everything else should be 'all'.
chunks: 'all',
name: 'framework',
test: /[\\/]node_modules[\\/](react|react-dom|scheduler|prop-types)[\\/]/,
priority: 40,
Expand All @@ -232,20 +235,22 @@ export default async function getBaseWebpackConfig(
)
},
name(module: { identifier: Function; rawRequest: string }): string {
const rawRequest =
module.rawRequest &&
module.rawRequest.replace(/^@(\w+)[/\\]/, '$1-')
if (rawRequest) return rawRequest

This comment has been minimized.

Sign in to view

Copy link
@evocateur

evocateur Aug 22, 2019

Removing this now makes lodash generate a chunk named lodash~lodash. Why was this necessary?

This comment has been minimized.

Sign in to view

Copy link
@evocateur

evocateur Aug 22, 2019

It makes the chunk name ridiculously long for generated chunks, using the full relative path to the package's main or module (the original motivation for the rawRequest handling).

e.g., lib chunk for module @zillow/sphere-viewer-common:

# before
zillow-sphere-viewer-common.${contentHash}.js

# after
zillow~sphere-viewer-common~dist~sphere-viewer-common.${contentHash}.js

The path to the asset seems irrelevant to the chunk name, as webpack will always resolve it to the same one for the same raw request.

const identifier = module.identifier()
// Remove everything up through '/node_modules/'
const trimmedIdentifier = /(?:^|[/\\])node_modules[/\\](.*)/.exec(
identifier
)
const processedIdentifier =
trimmedIdentifier &&
trimmedIdentifier[1].replace(/^@(\w+)[/\\]/, '$1-')
// Remove the file extension(s)
/[\w-\/\\]+/.exec(trimmedIdentifier[1])

let finalName = processedIdentifier && processedIdentifier[0]

finalName = finalName && finalName.replace(/[\\\/]/g, '~')
const backupName = identifier.replace(/[\\\/]/g, '~')

return processedIdentifier || identifier
return finalName || backupName
},
priority: 30,
minChunks: 1,
Expand Down

0 comments on commit 3896cbe

Please sign in to comment.