[ENG] Convert Navigation project from compiling with Webpack to Vite
Goal
We would like to convert our Navigation project to a Vite project over its current Webpack build. This will improve our Buyer Experience page speed (desktop and mobile) because of the many benefits of Vite.
The biggest benefit is to our website visitors: ES modules. Vite's ES module support and build optimizations make it more efficient in tree shaking - removing unused code from the final bundle. This further contributes to smaller bundle sizes and faster load times for our BE pages.
There will also be Developer Experience enhancements, allowing us to get code out quicker.
This should quicken some of our unavoidable client-side calls that we make on the nav which blocks the rendering of navigation text/links. In tandem with the removal of our personalization client-side calls (navigation!253 (comment 1523166403)) and content layout shift issue improvements (navigation#165 (closed)).
All of this will ultimately make our navigation and footer load faster. While there may still be a slight lag, our CLS issue should remove the perception of any large rendering lag.
Scope
- Collect before-Vite page load speed/core web vitals and module size
- Implement Vite and ES Modules into our Navigation project
- Test/create follow-up issues for non-blocking bugs
- Collect ater-Vite page load speed/core web vitals and module size
- If applicable, create a follow-up issue to add any necessary documentation to our handbook and/or a ReadMe in the nav project
Does anyone in leadership have eyes on this project?
Yes: @mpreuss22
What is the ultimate end goal vision vs the MVC1 iteration?
- Navigation loads at the same time as the homepage hero, or it loads first.
How do we measure success?
-
@mpreuss22
experiences zero load latency with the navigation and footer along with anyone else on the DEX team.
What analytics / data will we need to set-up?
-
Yes: Setting up a mechanism to record this load speed so we can benchmark it
-
No
Page(s)
Which page(s) are involved in this request?
- https://about.gitlab.com/ - all pages
DCI
-
DRI: @jgarc -
Consulted: @laurenbarker @meganfilo -
Informed: Everyone