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

chore: optimize Nuxt build config and Bootstrap Vue plugin registration #1227

Conversation

rwd
Copy link
Contributor

@rwd rwd commented Sep 29, 2021

Optimisations to Nuxt config:

  1. Enable building source maps in webpack to facilitate debugging in production builds, for instance identifying the source line at which errors occurred, or showing the source module responsible for unused JS identified by Lighthouse performance reports.
  2. Enable extractCSS to prevent inlining CSS in HTML, reducing the size of the initial document transfer (by 57 kB/45% on the homepage), but increasing the number of network requests required. Lighthouse performance reports favour extracted CSS. Disabled as it messes up some CSS. See: CSS Order is different when extractCSS is used nuxt/nuxt#4219
  3. Enable "modern" builds to have Nuxt generate an additional client-side bundle using ECMAscript which will be served to modern browsers detected as supporting it. The modern bundle is 34 kB/5% smaller than the transpiled one for older browsers.
  4. Reduce the number of globally registered Bootstrap Vue plugins, instead importing those only used occasionally in the views that need them.

This combination of optimisations has been tested with Lighthouse on the homepage, an item page, the collections hub page and the blog hub page, and result in performance score increases on all of 10-20 points (out of 100).

FIXME: there is one issue arising out of these changes, with the tooltips indicating metadata origin on the item page. When running in dev mode, these do not render properly at first, but making a change, any change, to src/components/items/SummaryInfo.vue, causing the hot reload, gets them rendering properly. This is not however an issue on production builds.

@rwd rwd changed the title chore: optimize Nuxt build config and Bootstrap Bue plugin registration chore: optimize Nuxt build config and Bootstrap Vue plugin registration Sep 29, 2021
@rwd rwd marked this pull request as ready for review September 29, 2021 09:47
@sonarcloud
Copy link

sonarcloud bot commented Sep 29, 2021

Kudos, SonarCloud Quality Gate passed!    Quality Gate passed

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 0 Code Smells

No Coverage information No Coverage information
0.0% 0.0% Duplication

1 similar comment
@sonarcloud
Copy link

sonarcloud bot commented Sep 29, 2021

Kudos, SonarCloud Quality Gate passed!    Quality Gate passed

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 0 Code Smells

No Coverage information No Coverage information
0.0% 0.0% Duplication

@LeoniePeters LeoniePeters merged commit 30d666c into master Sep 30, 2021
@LeoniePeters LeoniePeters deleted the chore/optimize-nuxt-build-config-and-bootstrap-vue-plugin-registration branch September 30, 2021 13:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
2 participants