feat: Categorise components for selective importing with ESM#878
Draft
curlyfriesplease wants to merge 9 commits intomasterfrom
Draft
feat: Categorise components for selective importing with ESM#878curlyfriesplease wants to merge 9 commits intomasterfrom
curlyfriesplease wants to merge 9 commits intomasterfrom
Conversation
…bundle size reduction
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
PR description
What is it doing?
Introduces subpath entrypoints, for optimised imports.
When we first created the CL we exported everything out of a single file, index.js.
We can assist the size of our frontend bundles by having subpaths to import, rather than everything.
At time of writing it's broken down into these categories and subcategories:
themeatoms- actions- brand- effects- form- icons- media- navigationmolecules- banners & heroes- cards & CTAs- engagement- footer- icons- search & lookuporganisms- compliance- donation- email & contact- footers- headers- mediaSets
sideEffectsin package.json. This helps tell the bundler that most of our JS files are 'pure' in the sense that if it only needs export X, it's safe to drop the rest of the file's unused exports. But if it's a stated 'sideEffect' file, they aren't safe to treat that way because they have real side effects. Like CSS files, or our picture/carousel components which uselazysizesandpure-react-carouselwith their own stylesheets buried in node_modules.So this should help with tree-shaking.
Caters to ESM so we can import more selectively, and the older CJS, for now. As we have some older node versioned repos that use CL. The library is built twice from src/: once into
dist/cjsas CommonJS (require), once intodist/esmas real ES modules (import / export).package.json#exports now points require at dist/cjs/... and import at dist/esm/... so bundlers and Node pick the right format.
babel.config.js no longer uses babel-preset-react-app; it uses @babel/preset-env + @babel/preset-react, driven by MODULE_FORMAT to pick between CJS or ESM. When neither is set (e.g. Jest), Babel still compiles tests to CJS targeting the current Node.
Once we know we can safely use ESM only, we can ditch a lot of the CJS specific parts out of package.json, and the
write-esm-package-jsonscript file, once we can move the package root totype: module.In order to run the postInstall script, Babel and its relates dependencies have moved from devDependency to the main dependencies.
Why is this required?
link to Jira ticket:
Add a link to the Jira ticket.
Quick Checklist:
My PR title follows the Conventional Commit spec.
I have filled out the PR description as per the template above.
I have added tests to cover new or changed behaviour.
I have updated any relevant documentation.
Important! - lastly, make sure to squash merge...