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

Fix tree-shaking of inner modules for the Webpack integration #4980

Merged
merged 2 commits into from
May 16, 2024

Conversation

romaricpascal
Copy link
Member

@romaricpascal romaricpascal commented May 13, 2024

We were not quite following the right step to optimise the build as it would be in an actual production set up while still retaining the possibility to inspect the content. This PR amends the Webpack build so tree-shaking is set up properly and internal utilities not used by single-component.mjs get excluded.

Tree-shaking in Webpack is not only a matter of setting usedExports (which still includes unused code, just doesn't export it), but also of having the TerserPlugin set up, as it's the one effectively removing the unused code.

Instead, tree-shaking is properly set up by using the production mode. We can then tweak the configuration of TerserPlugin, disabling mangling so we can look at class, function and variable names in the output.

Closes #4964

Copy link

github-actions bot commented May 13, 2024

📋 Stats

File sizes

File Size
dist/govuk-frontend-development.min.css 113.32 KiB
dist/govuk-frontend-development.min.js 42.34 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js 88.16 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs 82.83 KiB
packages/govuk-frontend/dist/govuk/all.mjs 981 B
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs 359 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css 113.3 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js 42.33 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs 5.55 KiB
packages/govuk-frontend/dist/govuk/init.mjs 4.86 KiB

Modules

File Size (bundled) Size (minified)
all.mjs 78.45 KiB 40.31 KiB
accordion.mjs 22.71 KiB 12.85 KiB
button.mjs 5.98 KiB 2.69 KiB
character-count.mjs 22.4 KiB 9.92 KiB
checkboxes.mjs 5.83 KiB 2.83 KiB
error-summary.mjs 7.89 KiB 3.46 KiB
exit-this-page.mjs 17.1 KiB 9.26 KiB
header.mjs 4.46 KiB 2.6 KiB
notification-banner.mjs 6.26 KiB 2.62 KiB
password-input.mjs 15.15 KiB 7.25 KiB
radios.mjs 4.83 KiB 2.38 KiB
skip-link.mjs 4.39 KiB 2.18 KiB
tabs.mjs 10.13 KiB 6.11 KiB

View stats and visualisations on the review app


Action run for e3b3ca7

Comment on lines +18 to +22
// Reproduce Webpack's defaults
// https://webpack.js.org/configuration/optimization/#optimizationminimizer
compress: {
passes: 2
}
Copy link
Member Author

Choose a reason for hiding this comment

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

note Unfortunately, Webpack does not have any option to merge a custom config over the default it uses when in production mode, so I've made sure to add back Webpack's default to be as close as possible to an actual build.

@romaricpascal romaricpascal force-pushed the fix-webpack-integration-config branch from 0eaeb88 to fdb79a2 Compare May 13, 2024 12:14
We were not quite following the right step to optimise the build as it would be in an actual production set up
while still retaining the possibility to inspect the content
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4980 May 13, 2024 12:21 Inactive
Comment on lines +42 to +50

- name: Check absence of unused utility functions in `single-component.js`
working-directory: ./.github/workflows/bundler-integrations
run: |
! grep "getFragmentFromUrl" dist/${{matrix.bundler}}/single-component.js -q

- name: Check presence of modules in `initAll.js`
working-directory: ./.github/workflows/bundler-integrations
run: |
Copy link
Member Author

Choose a reason for hiding this comment

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

note Splitting those on their own command. Despite GitHub using the -e flag for its default shell, which should fail fast, the grep for getFragmentFromUrl failing didn't lead to the failure of the check.

@romaricpascal romaricpascal marked this pull request as ready for review May 13, 2024 12:31
@romaricpascal romaricpascal requested a review from a team as a code owner May 13, 2024 12:31
@owenatgov owenatgov modified the milestones: [next], 5.4.0 May 16, 2024
@romaricpascal romaricpascal merged commit 97e6c75 into main May 16, 2024
48 checks passed
@romaricpascal romaricpascal deleted the fix-webpack-integration-config branch May 16, 2024 12:22
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.

Investigate tree shaking of common js utilities
3 participants