Add unminified source JS files to builds #1643

ShyamGadde · 2024-11-11T16:51:43Z

Summary

Relevant technical choices

The unminified version of web-vitals.js is not included because the file is copied directly from the pre-minified version in node_modules.
Source maps are excluded, as the unminified development version of the script will be loaded when SCRIPT_DEBUG is enabled.

github-actions · 2024-11-11T17:05:21Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: ShyamGadde <shyamgadde@git.wordpress.org>
Co-authored-by: westonruter <westonruter@git.wordpress.org>
Co-authored-by: adamsilverstein <adamsilverstein@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

westonruter · 2024-11-11T17:23:12Z

plugins/optimization-detective/detection.php

+	$detection_script_file = 'detect.min.js';
+	if ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) {
+		$detection_script_file = 'detect.js';
+	}


We should be able to reuse wp_scripts_get_suffix() here as seen in wp_default_scripts() in core:

Suggested change

$detection_script_file = 'detect.min.js';

if ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) {

$detection_script_file = 'detect.js';

}

$detection_script_file = sprintf( 'detect%s.js', wp_scripts_get_suffix() );

westonruter · 2024-11-11T17:35:23Z

The unminified version of web-vitals.js is not included because the file is copied directly from the pre-minified version in node_modules.

I was thinking alternatively that we could load the web-vitals file from src instead of dist when SCRIPT_DEBUG is enabled and there is a local node_modules directory. But this isn't feasible either because the source files are in TypeScript, so this would require transpilation. Probably doesn't make sense.

westonruter · 2024-11-11T17:36:00Z

Oh, there are also now 3 other JS files that need to have their minified version included conditionally:

plugins/embed-optimizer/detect.js
plugins/embed-optimizer/lazy-load.js
plugins/image-prioritizer/lazy-load.js

westonruter · 2024-11-11T19:41:18Z

webpack.config.js

@@ -164,6 +168,7 @@ const buildPlugin = ( env ) => {
 					{
 						from,
 						to,
+						info: { minimized: true },


This won't attempt to create a minified version of web-vitals.js, will it?

No, actually it's the opposite - setting info: { minimized: true } tells Webpack to skip running these files through the minimizer. It's a way to tell Webpack to copy the files 'as is' without trying to minimize them. The documentation specifically mentions this is 'Useful if you need to simply copy *.js files to destination "as is" without evaluating and minimizing them using Terser.'

ref: https://webpack.js.org/plugins/copy-webpack-plugin/#skip-running-javascript-files-through-a-minimizer

OK, thank you. I'm a little confused. We want to create minified versions of all the scripts, except for those which are copied from node_modules, right? So we'd want to copy from node_modules/web-vitals/dist and node_modules/@builder.io/partytown as pre-minified, but everything else we'd want to create minified versions for. I don't see how that is all configured here. (I'm a webpack novice!)

Let me clarify the current state and what needs to be fixed:

For files from node_modules (web-vitals and partytown):

These come pre-minified, but when copying them to the build directory for their respective plugins, we're not telling Webpack that. Currently, I have configured minimization skipping only for the production build.

Need to add info: { minimized: true } to prevent re-minification attempts

For plugin JS files that need minified versions:

Minified version for optimization-detective/detect.js is being created (detect.min.js)

Need to add minified versions for (I missed these as they were not initially part of the issue description):

embed-optimizer/detect.js

embed-optimizer/lazy-load.js

image-prioritizer/lazy-load.js

I'll update this PR to handle both these cases. Would that address your concerns?

Yes, I believe so!

westonruter · 2024-11-12T01:57:46Z

webpack.config.js

@@ -61,16 +61,20 @@ const optimizationDetective = ( env ) => {
 				patterns: [
 					{
 						from: `${ source }/dist/web-vitals.js`,
-						to: `${ destination }/web-vitals.js`,
+						to: `${ destination }/build/web-vitals.js`,


Is this missing the flag to say it is minified?

Suggested change

to: `${ destination }/build/web-vitals.js`,

to: `${ destination }/build/web-vitals.js`,

info: { minimized: true }`,

Yes! I just realized this. I should probably make this change in the config for Web Worker Offloading as well, which is copying the partytown files.

westonruter · 2024-11-12T02:01:44Z

webpack.config.js

@@ -164,6 +168,7 @@ const buildPlugin = ( env ) => {
 					{
 						from,
 						to,
+						info: { minimized: true },


OK, thank you. I'm a little confused. We want to create minified versions of all the scripts, except for those which are copied from node_modules, right? So we'd want to copy from node_modules/web-vitals/dist and node_modules/@builder.io/partytown as pre-minified, but everything else we'd want to create minified versions for. I don't see how that is all configured here. (I'm a webpack novice!)

…debug`

…ed Optimizer plugin

…ge Prioritizer plugin

…lugin

ShyamGadde · 2024-11-12T17:05:44Z

I wanted to bring up something I noticed regarding the partytown package used in the web worker offloading plugin:

The partytown package does provide unminified files under node_modules/@builder.io/partytown/lib/debug
In the initial webpack config, these were being copied but also getting minified
Now that we're skipping/disabling minification, we could potentially use these unminified script files when SCRIPT_DEBUG is enabled

Since the partytown code is inlined as a script tag, should I modify this plugin to use the unminified partytown JavaScript when SCRIPT_DEBUG is enabled? Or would it be better to stick with the current approach of using the pre-minified files?

westonruter · 2024-11-13T02:01:03Z

@ShyamGadde definitely! The non-minified debug version should be used here when SCRIPT_DEBUG is enabled:

performance/plugins/web-worker-offloading/hooks.php

Line 24 in b20b43f

    
           $partytown_js = file_get_contents( __DIR__ . '/build/partytown.js' ); // phpcs:ignore WordPress.WP.AlternativeFunctions.file_get_contents_file_get_contents -- It's a local filesystem path not a remote request.

westonruter · 2024-11-13T02:03:01Z

And good catch on the config erroneously minifying the debug scripts:

https://plugins.trac.wordpress.org/browser/web-worker-offloading/tags/0.1.1/build/partytown-atomics.js
https://plugins.trac.wordpress.org/browser/web-worker-offloading/tags/0.1.1/build/debug/partytown-atomics.js

The second one shouldn't have been minified!

…nabled

plugins/web-worker-offloading/hooks.php

Co-authored-by: Weston Ruter <westonruter@google.com>

westonruter

Great work! It's everything I ever dreamed for!

ShyamGadde added 4 commits November 11, 2024 22:00

Skip minification when creating the production build

a15db87

Create minified script files when building Optimization Detective Assets

9ba7400

Use unminified dev version of scripts when SCRIPT_DEBUG is enabled

236c61f

Remove redundant comment

b686515

ShyamGadde marked this pull request as ready for review November 11, 2024 17:05

ShyamGadde requested review from westonruter and felixarntz as code owners November 11, 2024 17:05

westonruter added this to the optimization-detective n.e.x.t milestone Nov 11, 2024

westonruter added [Plugin] Optimization Detective Issues for the Optimization Detective plugin [Type] Enhancement A suggestion for improvement of an existing feature labels Nov 11, 2024

westonruter requested changes Nov 11, 2024

View reviewed changes

westonruter reviewed Nov 11, 2024

View reviewed changes

Refactor detection script file handling to use wp_scripts_get_suffix

a3ab16a

westonruter reviewed Nov 12, 2024

View reviewed changes

ShyamGadde added 9 commits November 12, 2024 13:57

Disable minification attempt of web-vitals.js

1b0731d

Disable minification of unminified partytown script files under `lib/…

b7e8e30

…debug`

Add webpack config to create minified versions of script files in Emb…

b7127d7

…ed Optimizer plugin

Add minified file exists check to load.php in Embed Optimizer plugin

888ecdb

Conditionally load minified version of scripts in Embed Optimizer plugin

693e1db

Add webpack config to create minified versions of script files in Ima…

163082f

…ge Prioritizer plugin

Add minified file exists check to load.php in Image Prioritizer plugin

232e227

Conditionally load minified version of scripts in Image Prioritizer p…

9747f7b

…lugin

Merge branch 'trunk' into add/unminified-js-to-prod-builds

c34ac17

ShyamGadde requested a review from adamsilverstein as a code owner November 12, 2024 09:30

ShyamGadde requested a review from westonruter November 12, 2024 15:57

ShyamGadde added 2 commits November 13, 2024 13:56

Merge branch 'trunk' into add/unminified-js-to-prod-builds

37d8078

Load unminified version of partytown scripts when SCRIPT_DEBUG is e…

0a1354b

…nabled

westonruter reviewed Nov 13, 2024

View reviewed changes

plugins/web-worker-offloading/hooks.php Outdated Show resolved Hide resolved

ShyamGadde and others added 2 commits November 13, 2024 23:41

Refactor conditional logic for script path assignment

6e18901

Co-authored-by: Weston Ruter <westonruter@google.com>

Merge branch 'trunk' into add/unminified-js-to-prod-builds

04f7a75

ShyamGadde requested a review from westonruter November 13, 2024 18:25

westonruter approved these changes Nov 13, 2024

View reviewed changes

Add changelog entries

7af4b07

westonruter modified the milestones: optimization-detective 0.8.0, performance-lab 3.6.0 Nov 13, 2024

westonruter merged commit df29967 into WordPress:trunk Nov 13, 2024
24 checks passed

westonruter modified the milestones: performance-lab 3.6.0, optimization-detective 0.8.0 Nov 16, 2024

westonruter mentioned this pull request Nov 17, 2024

Minify script used for ajax activation of features; warn if absent and serve original file when SCRIPT_DEBUG is enabled #1658

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add unminified source JS files to builds #1643

Add unminified source JS files to builds #1643

ShyamGadde commented Nov 11, 2024 •

edited

Loading

github-actions bot commented Nov 11, 2024 •

edited

Loading

westonruter Nov 11, 2024

westonruter commented Nov 11, 2024

westonruter commented Nov 11, 2024 •

edited

Loading

westonruter Nov 11, 2024

ShyamGadde Nov 12, 2024

westonruter Nov 12, 2024

ShyamGadde Nov 12, 2024 •

edited

Loading

westonruter Nov 12, 2024

westonruter Nov 12, 2024

ShyamGadde Nov 12, 2024 •

edited

Loading

westonruter Nov 12, 2024

ShyamGadde commented Nov 12, 2024

westonruter commented Nov 13, 2024

westonruter commented Nov 13, 2024

westonruter left a comment

	to: `${ destination }/build/web-vitals.js`,
	to: `${ destination }/build/web-vitals.js`,
	info: { minimized: true }`,

Add unminified source JS files to builds #1643

Add unminified source JS files to builds #1643

Conversation

ShyamGadde commented Nov 11, 2024 • edited Loading

Summary

Relevant technical choices

github-actions bot commented Nov 11, 2024 • edited Loading

westonruter Nov 11, 2024

Choose a reason for hiding this comment

westonruter commented Nov 11, 2024

westonruter commented Nov 11, 2024 • edited Loading

westonruter Nov 11, 2024

Choose a reason for hiding this comment

ShyamGadde Nov 12, 2024

Choose a reason for hiding this comment

westonruter Nov 12, 2024

Choose a reason for hiding this comment

ShyamGadde Nov 12, 2024 • edited Loading

Choose a reason for hiding this comment

westonruter Nov 12, 2024

Choose a reason for hiding this comment

westonruter Nov 12, 2024

Choose a reason for hiding this comment

ShyamGadde Nov 12, 2024 • edited Loading

Choose a reason for hiding this comment

westonruter Nov 12, 2024

Choose a reason for hiding this comment

ShyamGadde commented Nov 12, 2024

westonruter commented Nov 13, 2024

westonruter commented Nov 13, 2024

westonruter left a comment

Choose a reason for hiding this comment

ShyamGadde commented Nov 11, 2024 •

edited

Loading

github-actions bot commented Nov 11, 2024 •

edited

Loading

westonruter commented Nov 11, 2024 •

edited

Loading

ShyamGadde Nov 12, 2024 •

edited

Loading

ShyamGadde Nov 12, 2024 •

edited

Loading