Optimize FidesJS bundle size by 40% by only loading TCF static strings when needed #4711
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎ 1 Ignored Deployment
|
…mize-fides-build-exclude-tcf-strings
Passing run #6674 ↗︎
Details:
Review all test suite changes for PR #4711 ↗︎ |
||||||||||||||||||||
| @@ -11,8 +11,8 @@ import commonjs from "@rollup/plugin-commonjs"; | |||
|
|
|||
| const NAME = "fides"; | |||
| const IS_DEV = process.env.NODE_ENV === "development"; | |||
| const GZIP_SIZE_ERROR_KB = 65; // fail build if bundle size exceeds this | |||
| const GZIP_SIZE_WARN_KB = 55; // log a warning if bundle size exceeds this | |||
| const GZIP_SIZE_ERROR_KB = 45; // fail build if bundle size exceeds this | |||
| * having to do any particularly difficult tree-shaking! | ||
| */ | ||
| import type { I18n, Locale } from "../../i18n"; | ||
| import { STATIC_MESSAGES_TCF } from "./locales"; |
There was a problem hiding this comment.
So basically, you've moved all the TCF-specific locales into the tcf-specific folder so that those don't get picked up and loaded into the message catalog by the non-TCF build. Then here, when we know we're working with the TCF-specific bundle, we load them in dynamically. Is that right?
There was a problem hiding this comment.
Yup, pretty much! The only difference is that it's not really "dynamically" - it's statically true that this entire file (tcf-i18n-utils) is only reachable from the fides-tcf.ts entrypoint, so that makes it really obvious to rollup that it's not needed by the regular fides.ts entrypoint.
| * TCF-specific i18n utility functions. These are isolated to a separate file so | ||
| * that Rollup can easily remove this code from the base fides.js bundle without | ||
| * having to do any particularly difficult tree-shaking! |
There was a problem hiding this comment.
OK so we can't share the non-tcf loadMessagesFromFiles method from i18n-utils.ts because of difficulties with Rollup, I remember running into this before, with trying to share methods between non-tcf and tcf
There was a problem hiding this comment.
We could technically call any of those methods from this file without any issue; we just need to be careful not to go the other direction and have the tcf/i18n/** files get imported by anything in the base package 👍
…mize-fides-build-exclude-tcf-strings
NevilleS
deleted the
PROD-1796-ns-optimize-fides-build-exclude-tcf-strings
branch
Closes PROD-1796
Description Of Changes
This optimizes the fides.js bundle size by splitting the static
i18nmessage catalogs into two chunks:lib/i18n/locales/**/messages.jsonlib/tcf/i18n/locales/**/messages-tcf.jsonWe then only load the TCF-specific messages during the initialization of the TcfOverlay, which is only called by the fides-tcf.js entrypoint. This allows rollup to correctly exclude all the TCF-specific JSON files from the default fides.js bundle and reduces the fides.js bundle size by ~22KB, an excellent 40% reduction!
Code Changes
loadTcfMessagesFromFileshelper inlib/tcf/i18nto load TCF messagesrollup-plugin-visualizerto dev dependencies to visualize bundle:(shows that the remaining
localesdata files are still about 15% of the overall bundle size, pre-minification/gzip)Steps to Confirm
consent-i18nE2E tests and confirm that all existing translations work as expected!Pre-Merge Checklist
CHANGELOG.md