Skip to content

Use bundler to build minified JavaScript#118

Closed
aduth wants to merge 1 commit intodigital-analytics-program:masterfrom
aduth:aduth-bundler
Closed

Use bundler to build minified JavaScript#118
aduth wants to merge 1 commit intodigital-analytics-program:masterfrom
aduth:aduth-bundler

Conversation

@aduth
Copy link

@aduth aduth commented Aug 1, 2024

This pull request proposes to replace uglify-js as the tool to build the minified version of the JavaScript.

This seeks to address a couple issues with the current minification:

  1. Because the file is not built using a bundler, variables from the JavaScript source leak into, pollute, and potentially conflict with other variables in the global scope of whatever page the script is included in.
    • You can test this on https://secure.login.gov for example, by entering _allowedQuerystrings into the browser developer tools console
  2. Because these variables are defined in the global scope, the minifier won't try to "mangle" (i.e. shorten) top-level variables (see docs), which limits how much the code can be minified.

Using a bundler with a minifier can address these issues, since bundlers will do the work to create an isolated scope for the script (usually just adding a wrapping IIFE), thus allowing additional minification gains through variable name shortening.

Most any bundler would fit the bill here (e.g. Rollup, Webpack, swc, etc.). This pull request proposes esbuild, since it works well as a drop-in replacement, and offers bundling, minification, and sourcemaps built-in without extra plugins.

Performance impact:

Raw size, measured using ls -al Universal-Federated-Analytics-Min.js:

Before: 27.4kb
After: 24.0kb
Diff: -3.4kb (-12.4%)

Gzip size, measured using gzip-size-cli:

Before: 8.2kb
After: 7.55kb
Diff: -0.65kb (-8%)

@aduth
Copy link
Author

aduth commented Aug 1, 2024

Another option would be to simply add a wrapping IIFE to the original source file, which would also help avoid the listed issues for someone who chooses to load the non-minified version of the script. The only downside is that, depending on how you choose to format the code, it may introduce an extra level of tab indentation for most of the file contents.

@aduth
Copy link
Author

aduth commented Aug 16, 2024

There may be additional changes required to support being able to bundle the current JavaScript. Specifically, some code depends on leaking globals, such as piiRegex.

Leaked here:

Referenced here:

piiRegex.forEach(function (pii) {

Updating the code to reference window.piiRegex consistently should fix this issue.

@aduth
Copy link
Author

aduth commented Nov 21, 2024

It looks like the primary issue of leaking globals has been addressed in recent releases (specifically 2368989 / 8.3).

@aduth aduth closed this Nov 21, 2024
@aduth aduth deleted the aduth-bundler branch November 21, 2024 15:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant