Skip to content

feat: Categorise components for selective importing with ESM#878

Draft
curlyfriesplease wants to merge 9 commits intomasterfrom
ENG-5079-performance-refactor
Draft

feat: Categorise components for selective importing with ESM#878
curlyfriesplease wants to merge 9 commits intomasterfrom
ENG-5079-performance-refactor

Conversation

@curlyfriesplease
Copy link
Copy Markdown
Contributor

@curlyfriesplease curlyfriesplease commented Apr 24, 2026

PR description

What is it doing?

  1. 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:
    theme
    atoms
    - actions
    - brand
    - effects
    - form
    - icons
    - media
    - navigation
    molecules
    - banners & heroes
    - cards & CTAs
    - engagement
    - footer
    - icons
    - search & lookup
    organisms
    - compliance
    - donation
    - email & contact
    - footers
    - headers
    - media

  2. Sets sideEffects in 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 use lazysizes and pure-react-carousel with their own stylesheets buried in node_modules.
    So this should help with tree-shaking.

  3. 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/cjs as CommonJS (require), once into dist/esm as 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-json script file, once we can move the package root to type: 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...

@curlyfriesplease curlyfriesplease changed the title Introduce subpath entrypoints for optimized imports feat: Bundle size reduction improvements Apr 24, 2026
@curlyfriesplease curlyfriesplease changed the title feat: Bundle size reduction improvements feat: Categorise components for selective importing with ESM Apr 29, 2026
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