Scripts: Lazy loaded JavaScript files do not break browser cache upon changes

[johnstonphilip]

Description

If you use wp-scripts in a custom project that uses lazy loading with react, the lazily-loading javascript files remain cached by the browser and load out-of-date versions.

To fix this, webpack recommend putting a contenthash into the filename so it's unique if anything changed. See:
https://webpack.js.org/guides/caching/

To add this to wp-scripts, we can simply modify that here:

gutenberg/packages/scripts/config/webpack.config.js

Line 117 in 58064cc

filename: '[name].js',

So that this:

filename: '[name].js',

Becomes this:

filename: '[name].[contenthash].js',

The main problem there is that if someone is enqueueing a file using it's name, it will now have a unique content hash. Therefore, this would be a breaking change.

I am not sure of another way to fix this though.

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[johnstonphilip]

Just to note: in development watch mode you probably don't want to use the contenthash. You can do that like this in a custom webpack.config.js file:

const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );

module.exports = (env, argv) => ({
	...defaultConfig,
	output: {
		...defaultConfig.output,
		filename: argv.env.WEBPACK_BUILD ? '[name].[contenthash].js' : '[name].js',
	},
})

[gziolo]

@jsnajdr is working on lazy block loading for core blocks in #55585. The way he approached a similar issue was by using output.chunkFilename in the webpack config. I'm not sure if the PR in its current shape resolves the issue with browser caching, but we definitely could look into leveraging chunkFilename in wp-scripts to address the issue described above.

[jsnajdr]

Yes, setting chunkFilename is exactly what you need to resolve this issue. The filename option sets the file names of "initial" chunks, i.e., the entrypoints that have an .asset.php file and are wp_enqueue_script-ed. You don't want to change these. The chunkFilename sets names only of the "non-initial" chunks, i.e., the dynamic ones.

To avoid "polluting" the filenames, you can use a [name].js?v=[contenthash] pattern, where the filename in the plugin directory will still be [name].js, but will be loaded with a URL like foo.js?v=abcd, which also avoids reading stale files from cache.

If you wanted all the plugin's files to use a common version number, like:

./plugins/foo/main.js?v=1.0
./plugins/foo/dynamic-a.js?v=1.0
./plugins/foo/dynamic-b.js?v=1.0

this should also be possible: the chunkFilename would be a function, which looks at chunk.entrypoint of the chunk passed as argument, and uses the entrypoint's hash/version instead of the chunk's.

All this can be done without waiting for #55585, can be shipped on its own.

[rithik56]

Hi @gziolo , I am a beginner in open source contribution and I would like to work on this issue.

[gziolo]

Hi @rithik56, sounds great! Let us know when you have a PR ready for review 👍🏻

[rithik56]

Thanks @gziolo , will let you know once the PR is ready