Getting rid of granular imports and bootstrap/bootstrap-vue deps
This is a follow up of the conversation initiated in !51 (merged).
For the historical reasons, I'm copy/pasting the original comment here:
So, what are your concerns, Denys?
There are 2 major things I would like to discuss.
1. Importing gitlab-ui in general
In the SCSS, why not to do exactly the same we do in GitLab? Namely, do a single import:
@import '@gitlab/ui/src/scss/gitlab_ui';
Pros:
It will pull in everything contained in
gitlab_ui.scss
,gitlab_ui_variables.scss
PLUSbootstrap
andbootstrap-vue
that are explicitly imported inglobal.scss
. This will allow us to get rid of two files that do nothing except pulling in gitlab-ui modules and simplify theglobal.scss
.Cons:
The resulting bundle size will be a tad bigger (53.64KB gzipped for the whole CSS bundle vs. 22.16KB). However, here we're talking about 0 seconds delay in serving the bundle on anything faster than 256kbit/s connection. And on the slower connections, the download speed will be affected by 10ms at max that is not noticeable by any human being according to psychological research.
2. Explicitely installing
bootstrap
andbootstrap-vue
When we have gitlab-ui as a dependency, both packages are pulled in as the dependencies for gitlab-ui package anyway. But explicitly installing and pinning these to some versions we create a precedent that might result in unpredictable results in the UI when a gitlab-ui component, relying on a certain version of bootstrap (presumably older one) looks totally odd/broken because we introduced the newer version of bootstrap as a dependency. We, technically, override dependencies of gitlab-ui without any warranty that the components won't be broken.
🤔 do you think we can really remove those?Yes, I suppose we can easily remove those dependencies from
package.json
and let gitlab-ui rule it all.
What's in this MR?
This MR suggests:
- Getting rid of the following dependencies:
bootstrap
bootstrap-vue
and instead, rely on the packages that are pulled in with @gitlab-ui
dependency to avoid out-of-sync versions of the same packages.
- Getting rid of the granular SCSS imports from
gitlab-ui
,bootstrap
andbootstrap-vue
in favor of one single import + importing the utility classes, as suggested by @ohoral:
@import '@gitlab/ui/src/scss/gitlab_ui';
@import '@gitlab/ui/src/scss/utilities';
to follow the pattern from GitLab.
Bundle size concern.
Here are the screenshots of the resulting bundle size comparison:
Before | After |
---|---|
The difference in 31.48KB equals to nearly zero download time increase even on a slow 3G connection.