Code splitting causes PSI drop with 9.2+

[mintyfloss]

Feature request

Is your feature request related to a problem? Please describe.

We're currently pinned to version 9.1.7 because upgrading to a more recent version causes our PSI to drop significantly. Here are the screenshots of the Lighthouse result.

	9.1.7	9.4.4
Lighthouse
JS Chunks	5 JS files	20 JS files
First Contentful Paint	2.3s	4.8s

Describe the solution you'd like

I'm guessing that in version 9.4.4, PSI is suffering because it's loading an additional 15 JS files. Is there a way to customize code-splitting? We have 12 different pages on our site, but most of our users rarely navigate between pages. At most, users will go to 2 pages and leave the site.

I'm also curious how the common chunk is created. We include the react-ga component in _app.js, so I expect the code for it will be in common. However, I see a separate chunk created for it.

Describe alternatives you've considered

I currently can't think of another reason why our PSI score will suffer. There was no code change besides updating to Next to 9.4.4.

I also posted this same issue in this thread #11120 (comment).

[jamesmosier]

Here is more info on the new code splitting techniques: https://nextjs.org/blog/next-9-2#improved-code-splitting-strategy

And additionally here is the webpack splitChunks config:

next.js/packages/next/build/webpack-config.ts

Lines 373 to 457 in 38bd1a0

	prodGranular: {
	chunks: 'all',
	cacheGroups: {
	default: false,
	vendors: false,
	// In webpack 5 vendors was renamed to defaultVendors
	defaultVendors: false,
	framework: {
	chunks: 'all',
	name: isWebpack5 ? 'static/chunks/framework' : 'framework',
	// This regex ignores nested copies of framework libraries so they're
	// bundled with their issuer.
	// https://github.com/vercel/next.js/pull/9012
	test: /(?<!node_modules.*)[\\/]node_modules[\\/](react|react-dom|scheduler|prop-types|use-subscription)[\\/]/,
	priority: 40,
	// Don't let webpack eliminate this chunk (prevents this chunk from
	// becoming a part of the commons chunk)
	enforce: true,
	},
	lib: {
	test(module: { size: Function; identifier: Function }): boolean {
	return (
	module.size() > 160000 &&
	/node_modules[/\\]/.test(module.identifier())
	)
	},
	name(module: {
	type: string
	libIdent?: Function
	updateHash: (hash: crypto.Hash) => void
	}): string {
	const hash = crypto.createHash('sha1')
	if (isModuleCSS(module)) {
	module.updateHash(hash)
	} else {
	if (!module.libIdent) {
	throw new Error(
	`Encountered unknown module type: ${module.type}. Please open an issue.`
	)
	}
	hash.update(module.libIdent({ context: dir }))
	}
	return (
	(isWebpack5 ? 'static/chunks/' : '') +
	hash.digest('hex').substring(0, 8)
	)
	},
	priority: 30,
	minChunks: 1,
	reuseExistingChunk: true,
	},
	commons: {
	name: (isWebpack5 ? 'static/chunks/' : '') + 'commons',
	minChunks: totalPages,
	priority: 20,
	},
	shared: {
	name(module, chunks) {
	return (
	(isWebpack5 ? 'static/chunks/' : '') +
	(crypto
	.createHash('sha1')
	.update(
	chunks.reduce(
	(acc: string, chunk: webpack.compilation.Chunk) => {
	return acc + chunk.name
	},
	''
	)
	)
	.digest('hex') +
	(isModuleCSS(module) ? '_CSS' : ''))
	)
	},
	priority: 10,
	minChunks: 2,
	reuseExistingChunk: true,
	},
	},
	maxInitialRequests: 25,
	minSize: 20000,
	},
	}

Currently there is no configuration options for code splitting exposed.