Skip to content

Build navigation package with Vite

Javier Garcia requested to merge jg-vite-try into main

Step 1: What is changing in this MR?

Review apps do not work, so you will need to check this out locally!

  • Updated library from 2.6.x to 2.7.x
    • You might notice some changes in the MR unrelated to this effort. This is to silence errors in local dev as a result of moving to this version of Vue. I chose this version of Vue to match with Buyer Experience.
  • Does not ship with Vue or Slippers. Only ships whatever is necessary for the components to work as necessary.
  • Added rollup-visualizer. In local dev, if you go to http://localhost:YOUR_PORT_NUMBER_HERE/stats.html, you should see a nice chart involving the size of the JS bundle.
  • Switch out vue-cli-service for vite

    • The bundle size of uncompressed CSS/JS goes from 2.15MB → ~270kb (~90% reduction). I will post the final sizes below

      name filetype size
      be-navigation.es.js application/javascript 177 kB
      style.css text/css 92.8 kB

    • Our JSON files holding our content are around 75kb of our JS bundle (meaning the true size of the JS is closer to 20kb). If we are doing our due diligence, Nuxt should build this out into the template. If this is not, this is something we are doing wrong in Buyer Experience that we should solve before pulling data into Contentful.

    • To resolve CSS bundles being massive, I decided to remove the scoped attribute from the style block in our single file components.

      • I noticed that there were some duplicate class names in the minimal footer vs footer components and minimal nav vs nav components that are now affecting each other (as these styles were likely copy-pasted from one component to another).
        • I resolved this by renaming the root component class with minimal- and attaching any global selectors and tying it to that class. I'll drop an example below from minimal-footer.vue.
      /* before */
<style lang="scss" scoped> 

 a:not(.slp-btn) {
    text-decoration: none;
    color: $color-text-link-100;
  }

  p > a:not(.slp-btn),
  li a:not(.slp-btn) {
    color: $color-text-link-100;

    &:hover {
      text-decoration: underline;
    }
  }

*,
::before,
::after {
  box-sizing: border-box;
}

.footer {
  background-color: $color-surface-700;
  color: $color-text-50;
  padding: 40px $spacing-16; 

  /* other nested styles here */
}

/* after */
<style lang="scss">
.minimal-footer {
  background-color: $color-surface-700;
  color: $color-text-50;
  padding: 40px $spacing-16;

  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }

  a:not(.slp-btn) {
    text-decoration: none;
    color: $color-text-link-100;
  }

  p > a:not(.slp-btn),
  li a:not(.slp-btn) {
    color: $color-text-link-100;

    &:hover {
      text-decoration: underline;
    }
  }
 /* other nested styles here */
}

Potential improvements(future iterations)

  1. Lazy load modules that aren't needed right away. For example, mobile nav doesn't need to be loaded into a desktop site, and vice versa. Or the Language selector functionality until someone actually clicks to select a new language. I have merely scratched the surface of Vite here. There are a lot of very clever things that the tooling can do that I did not have the capacity to fully explore in this iteration.

Step 2: Ensure that your changes comply with the following, where applicable:

  • I, the Assignee, have run Axe tools on any updated pages, and fixed the relevant accessibility issues.
  • These changes meet a specific OKR or item in our Quarterly Plan.
  • These changes work on both Safari, Chrome, and Firefox.
  • These changes have been reviewed for Visual Quality Assurance and Functional Quality Assurance on Mobile, Desktop, and Tablet.
  • These changes work with our Google Analytics and SEO tools.
  • These changes have been documented as expected.

Step 3: Add the appropriate labels for triage

This MR will have dex-approval::2-standard automatically applied, but please update it as follows. If deciding between two levels, go with the higher of the two: https://gitlab.com/gitlab-com/www-gitlab-com/blob/master/sites/handbook/source/handbook/marketing/digital-experience/marketing-site-approval-process/index.html.md

Step 4: Tag the appropriate person for review

Depending on which label is used, you may tag the following people as a Reviewer on this MR: https://about.gitlab.com/handbook/marketing/digital-experience/marketing-site-approval-process/#step-3-tag-the-appropriate-people-for-review

Edited by Javier Garcia

Merge request reports