Skip to content

fides-js: Reduce bundle size by removing dependencies and trimming locale data#8142

Open
eastandwestwind wants to merge 6 commits intomainfrom
fides-js-optimizations
Open

fides-js: Reduce bundle size by removing dependencies and trimming locale data#8142
eastandwestwind wants to merge 6 commits intomainfrom
fides-js-optimizations

Conversation

@eastandwestwind
Copy link
Copy Markdown
Contributor

@eastandwestwind eastandwestwind commented May 8, 2026

Unticketed

Description Of Changes

Reduces the fides-js bundle size through three low-risk optimizations:

  1. Remove base-64 dependency — replaced with native btoa/atob, which are already used elsewhere in the same file (cookie.ts) for newer compression helpers. The base-64 package was CJS-only with no tree-shaking.

  2. Remove uuid dependency — replaced with native crypto.randomUUID(). The uuid package itself already delegates to crypto.randomUUID() when available, making the fallback code dead weight on all modern browsers.

  3. Trim base i18n locale bundles to English-only — removes 41 non-English locale JSON imports (~27KB) for the base static messages. The experience API already provides all translations at runtime. The static messages only serve as GPC text fallbacks, and the existing code already falls back to English when a locale-specific static file is missing (STATIC_MESSAGES[locale] ?? STATIC_MESSAGES[DEFAULT_LOCALE]). Note: TCF locale bundles are intentionally kept — their static messages contain UI chrome labels (tab names, radio buttons, table headers) that have no API fallback.

Gzipped Size (what users download)

Bundle main optimized Reduction % Smaller
fides.js 51.21 KB 42.50 KB -8.71 KB 17.0%
fides-tcf.js 97.19 KB 88.52 KB -8.67 KB 8.9%
fides-headless.js 26.93 KB 18.24 KB -8.69 KB 32.3%

Code Changes

  • src/lib/cookie.ts: Replaced base-64 imports with native btoa/atob, replaced uuid with crypto.randomUUID()
  • src/lib/hooks/useUUID4.ts: Replaced uuid with crypto.randomUUID()
  • src/lib/fides-lifecycle-manager.ts: Replaced uuid with crypto.randomUUID()
  • src/lib/i18n/locales/index.ts: Removed 41 non-English locale JSON imports, kept LOCALE_LANGUAGE_MAP intact
  • src/lib/i18n/i18n-utils.ts: Added null guard for Partial<Record> type change in loadMessagesFromFiles
  • package.json: Removed base-64, @types/base-64, uuid, @types/uuid
  • jest.config.js: Added setup file for crypto.randomUUID polyfill in jsdom
  • __tests__/setup.ts: New — polyfills crypto.randomUUID for jsdom test environment
  • Updated all affected tests to remove uuid/base-64 mocks

Steps to Confirm

  1. Run npm test in clients/fides-js — all 599 tests should pass
  2. Run npm run typecheck — should pass with no errors
  3. Run npm run build — verify bundle sizes are within limits (should be smaller)
  4. Verify consent banner renders correctly in English and non-English locales
  5. Verify GPC labels still appear (will be English fallback for non-English locales when API doesn't provide them)
  6. Verify TCF overlay renders correctly with Spanish locale translations

Pre-Merge Checklist

  • Issue requirements met
  • All CI pipelines succeeded
  • CHANGELOG.md updated
    • Updates unreleased work already in Changelog, no new entry necessary
  • UX feedback:
    • No UX review needed
  • Followup issues:
    • No followup issues
  • Database migrations:
    • No migrations
  • Documentation:
    • No documentation updates required

@vercel
Copy link
Copy Markdown
Contributor

vercel Bot commented May 8, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

2 Skipped Deployments
Project Deployment Actions Updated (UTC)
fides-plus-nightly Ignored Ignored Preview May 8, 2026 3:01pm
fides-privacy-center Ignored Ignored May 8, 2026 3:01pm

Request Review

@eastandwestwind eastandwestwind force-pushed the fides-js-optimizations branch from de3c376 to 11a80ce Compare May 8, 2026 13:48
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 8, 2026

Dependency Review

✅ No vulnerabilities found.

Snapshot Warnings

⚠️: No snapshots were found for the head SHA 3870388.
Ensure that dependencies are being submitted on PR branches and consider enabling retry-on-snapshot-warnings. See the documentation for more information and troubleshooting advice.

Scanned Files

  • clients/fides-js/package.json

eastandwestwind added a commit that referenced this pull request May 8, 2026
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
eastandwestwind and others added 3 commits May 8, 2026 16:08
…ale data

- Replace `base-64` npm package with native `btoa`/`atob` (already used
  elsewhere in the same file for newer compression helpers)
- Replace `uuid` npm package with native `crypto.randomUUID()` (the uuid
  package itself already delegates to this when available)
- Trim static i18n locale bundles to English-only: removes 41 non-English
  locale JSON imports (~27KB base, ~99KB TCF). The experience API provides
  all translations at runtime; static messages only serve as GPC text
  fallbacks, which already fall back to English when a locale is missing.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
TCF static messages contain UI labels (tab names like "Purposes",
"Features", "Vendors", radio buttons like "Consent", "Legitimate
interest", table headers, etc.) that are not provided by the experience
API. Unlike the base GPC-only static messages, these have no alternative
translation source and must remain bundled for all 42 locales.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@eastandwestwind eastandwestwind force-pushed the fides-js-optimizations branch from c91f95d to 29e11ca Compare May 8, 2026 14:08
eastandwestwind and others added 3 commits May 8, 2026 16:23
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The privacy-center tests import fides-js which now uses
crypto.randomUUID() at module load time. The CI Jest/jsdom
environment doesn't provide this API, so reuse the fides-js
setup file to polyfill it.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@eastandwestwind eastandwestwind marked this pull request as ready for review May 8, 2026 15:02
@eastandwestwind eastandwestwind requested a review from a team as a code owner May 8, 2026 15:02
@eastandwestwind eastandwestwind requested review from jpople and removed request for a team and jpople May 8, 2026 15:02
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 8, 2026

Title Lines Statements Branches Functions
admin-ui Coverage: 8%
6.66% (3042/45663) 5.98% (1572/26254) 4.64% (630/13575)
fides-js Coverage: 78%
79.17% (1977/2497) 66.25% (1249/1885) 73.31% (349/476)
privacy-center Coverage: 85%
82.53% (364/441) 79.74% (189/237) 74.07% (60/81)

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