The downside of this approach is that the build task runs webpack twice (through wp-scripts): one time to generate the minified min.js script (and its asset PHP file) and another pass to generate the unminfied version.

Do we know why the original attempt from @sirreal has been reverted?

How can we check that i18n string discovery still works properly with this PR? (I think GlotPress uses some wp-cli command to extract these)

The original attempt renamed the single generated JavaScript file extensions from .js to .min.js. Producing a single .min.js file (without an accompanying .js file) was problematic because:

The translations were not parsed because the plugin repository ignores .min.js when extracting strings for translation.

Here's a link to the relevant Core Slack conversation.

The two webpack compilations generate two index.asset.php and index.min.asset.php files that are identical. We need only one. Does the filename need the .min. infix?

Oh, good catch!

We should disable the DependencyExtractionWebpackPlugin for the non-minified compilation. And if we don't want to include .min. in the PHP filename, patch the part of the plugin that does:

Thanks for pointing this out, I wasn't aware of this part.

If we want to avoid the double compilation and output both .js and .min.js assets at the same time, it should be possible with a simple webpack plugin. One that hooks to a place right before the Terser minification, outputs a .js asset, and then lets Terser minify the source into a .min.js asset. Let me know if you want me to push a commit with that slightly_smiling_face

@jsnajdr That would be great! ❤️ 🙇🏻

If we want to avoid the double compilation and output both .js and .min.js assets at the same time, it should be possible with a simple webpack plugin. One that hooks to a place right before the Terser minification, outputs a .js asset, and then lets Terser minify the source into a .min.js asset. Let me know if you want me to push a commit with that slightly_smiling_face

@jsnajdr That would be great! heart 🙇🏻

Actually, I think it'd be fun to poke with WebPack plugins. I'll take it for a spin today and see if I can manage to get it working.

Actually, I think it'd be fun to poke with WebPack plugins. I'll take it for a spin today and see if I can manage to get it working.

@jsnajdr I gave it a try but didn't manage to implement what you suggested, yet :(. I pushed what I did so far in the following commit: 7049cfa.

After failing to tap into a hook that would allow me to generate the unminized files before the minimizer ran, I tried a more brute-force approach in the plugin I created, but it doesn't work. Well, it does generate the <name>.js, so the output looks good if you don't see the contents of the corresponding <name>.min.js, which are not minimized. I realized the apply method here only hooks the Terser plugin in WebPack's lifecycle, so calling it like this doesn't minimize the files synchronously as I was expecting.

If I could get hold of the unminized source for each asset at this point, then I could leave Terser where it belongs in the webpack.min.js. The idea would be to:

1. Pass the Terser plugin in the optimizations.minifier attribute in the main WebPack config object, as it should be passed as per the WebPack API;
2. In our custom plugin, we tap into the compiler.emit hook (like I'm doing the plugin here), and generate the corresponding <name>.js files for each <name>.min.js (like I'm doing here);
3. Each new <name>.js entry, we should assign the unminized source code. And here's where I got stuck (and that's when I tried the brute-force approach of manually calling the Terser plugin, which didn't work). I don't know how to get the unminized source code from here; also considering that at this point if the minimizer is active, we'll already get the minimized source for each entry asset, so the the original source is not part of the assets map anymore.

Or maybe I just didn't understand how to tap into the emit hook but before the Terser runs. Even if I do, though, I'd have to somehow make sure the asset entries I add don't get mangled later.

I'll continue tomorrow, but if you know how to solve this from the top of your head, feel free to jump in. If you don't have the time, I could use some tips on how to proceed. Thanks in advance!

@fullofcaffeine I'm playing with something like this:

class AddReadableJsAssetsWebpackPlugin {
	extractUnminifiedFiles( compilation ) {
		const files = compilation.chunks.flatMap( ( chunk ) => chunk.files );
		compilation.unminifiedAssets = files.map( ( file ) => {
			const asset = compilation.assets[ file ];
			const unminifiedFile = file.replace( /\.min\.js$/, '.js' );
			return [ unminifiedFile, asset.source() ];
		} );
	}
	async writeUnminifiedFiles( compilation ) {
		for ( const [ file, source ] of compilation.unminifiedAssets ) {
			await fs.promises.writeFile( file, source );
		}
	}
	apply( compiler ) {
		compiler.hooks.compilation.tap(
			this.constructor.name,
			( compilation ) => {
				compilation.hooks.additionalAssets.tap(
					this.constructor.name,
					() => this.extractUnminifiedFiles( compilation )
				);
			}
		);
		compiler.hooks.afterEmit.tapPromise(
			this.constructor.name,
			( compilation ) => this.writeUnminifiedFiles( compilation )
		);
	}
}

Don't modify anything about TerserPlugin at all. Save the asset source files before Terser runs, in the additionalAssets hook (runs right before optimizeAssets). Write them after all production assets are written, to already-created directories like build/a11y.

That's all I managed to do today. You can continue from this point, I'm coming back tomorrow again.

@fullofcaffeine I'm playing with something like this:

class AddReadableJsAssetsWebpackPlugin {
	extractUnminifiedFiles( compilation ) {
		const files = compilation.chunks.flatMap( ( chunk ) => chunk.files );
		compilation.unminifiedAssets = files.map( ( file ) => {
			const asset = compilation.assets[ file ];
			const unminifiedFile = file.replace( /\.min\.js$/, '.js' );
			return [ unminifiedFile, asset.source() ];
		} );
	}
	async writeUnminifiedFiles( compilation ) {
		for ( const [ file, source ] of compilation.unminifiedAssets ) {
			await fs.promises.writeFile( file, source );
		}
	}
	apply( compiler ) {
		compiler.hooks.compilation.tap(
			this.constructor.name,
			( compilation ) => {
				compilation.hooks.additionalAssets.tap(
					this.constructor.name,
					() => this.extractUnminifiedFiles( compilation )
				);
			}
		);
		compiler.hooks.afterEmit.tapPromise(
			this.constructor.name,
			( compilation ) => this.writeUnminifiedFiles( compilation )
		);
	}
}

Don't modify anything about TerserPlugin at all. Save the asset source files before Terser runs, in the additionalAssets hook (runs right before optimizeAssets). Write them after all production assets are written, to already-created directories like build/a11y.

That's all I managed to do today. You can continue from this point, I'm coming back tomorrow again.

@jsnajdr Oh now I understand what you had in mind!

To clarify: My idea was to avoid manually getting the file contents and writing to the filesystem myself. I thought it'd be simpler to just hook into the lifecycle to add some unminimized assets to the list before terser runs (or after), and then let the already setup WebPack pipeline run after that, thus spitting all the files for us. As you can see, I did manage to accomplish part of it, I just couldn't find a way to exclude files from being minimized or get unminimized files after the minimizer ran :(

Anyway, your approach is sound and I'll try it out today! Thanks a lot for taking the time to work on it!

@gziolo Thanks for the review 🙇🏻. This is ready for another look!

Size Change: -566 B (0%)

Total Size: 1.03 MB

_{compressed-size-action}

Is @wordpress/readable-js-assets-webpack-plugin something that can be useful outside of this repository? I understand that creating a new package creates nice isolation of functionality but we can always mark it as private and never publish it to npm if we consider it internal.

Is @wordpress/readable-js-assets-webpack-plugin something that can be useful outside of this repository?

It should be useful for any WordPress plugin that builds and ships minified JS files. This plugin will output unminified versions on the side. It's my understanding that it's common for WordPress plugins to publish also unminified versions. For translations, for reviews by the plugin review team, for the SCRIPT_DEBUG flag to work...

It could be an option for the wp-scripts build command.

Proposing that this is reverted in #32617, as this seems to stop sourcemaps from working when using npm run dev. Unless a very quick fix can be made, revert seems the best option as this will be a frustrating problem for contributors.

Proposing that this is reverted in #32617, as this seems to stop sourcemaps from working when using npm run dev. Unless a very quick fix can be made, revert seems the best option as this will be a frustrating problem for contributors.

Quick fix was made here. We'll eventually follow-up with improvements.