Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Only import the js from GOV.UK Frontend that the website is using #3766

Merged
merged 2 commits into from
Apr 29, 2024

Conversation

owenatgov
Copy link
Contributor

@owenatgov owenatgov commented Apr 25, 2024

Change

Updates application.js to only initialise the components that the website is using to optimise website performance. Part of #3732.

Notes

This change reduces application.js by approximately 36kb.

This change imports the component js directly from the mjs in the component folders instead of importing directly from govuk-frontend via combined curly brackets as we'd expect our users to do. This is because we've noticed as part of this work that our tree shaking doesn't work when importing the "expected" way and only works when importing the components directly. See alphagov/govuk-frontend#4957.

This was made possible by Romaric's work to figure out what data-module's the website is using in #3760.

There are a couple of components that we're using that have js associated with them that I haven't included in the import:

Header

The header js is only used to manage the mobile menu view toggle. We're using custom navigation that doesn't rely on or interact with this js so importing it is unnecessary. I've additionally removed data-module="govuk-header" as this isn't being used by anything.

Radios

We're using radios on the cookie banner page but the radios js is only used to manage conditional reveals, which we aren't using.

Copy link

netlify bot commented Apr 25, 2024

You can preview this change here:

Name Link
🔨 Latest commit cea77b1
🔍 Latest deploy log https://app.netlify.com/sites/govuk-design-system-preview/deploys/662b87eae49f1b0008219f6a
😎 Deploy Preview https://deploy-preview-3766--govuk-design-system-preview.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

We're not actually using the header js, which only manages the default header menu whereas we're using a custom navigation function. This is therefore unnecessary.
Copy link
Member

@romaricpascal romaricpascal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice one! Thanks for picking up from me just gathering the list of which modules the site ran 🙌🏻

Copy link
Member

@romaricpascal romaricpascal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice one! Thanks for picking up from me just gathering the list of which modules the site ran 🙌🏻

@owenatgov owenatgov merged commit 42a0373 into main Apr 29, 2024
13 checks passed
@owenatgov owenatgov deleted the js-imports branch April 29, 2024 10:09
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.

None yet

2 participants