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

perf: only use the bootstrap js that we need #75

Merged
merged 1 commit into from
Nov 30, 2023
Merged

Conversation

astone123
Copy link
Collaborator

Instead of loading the entire bootstrap JS up front, we should use our package manager and bundler to only ship the JS that we need - in this case, the only things that we actually use the bootstrap JS for are the dropdowns, so just import the dropdown JS.

@astone123 astone123 self-assigned this Nov 30, 2023
@@ -7,6 +7,8 @@
"@types/react": "^18.0.21",
"@types/react-dom": "^18.0.6",
"axios": "^0.26.1",
"bootstrap": "^5.3.2",
"popper": "^1.0.1",
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

popper is a peer dep for the dropdown stuff in bootstrap

Copy link
Owner

@wweitzel wweitzel left a comment

Choose a reason for hiding this comment

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

To check my understanding:

  1. Currently we are loading the entire bootstrap from a CDN. This should be pretty fast as is, and loads in parallel with our app js bundle.
  2. This PR makes it so that instead of loading from a CDN in parallel with with our app js, we bundle a small amount of the bootstrap directly into our app js bundle? Meaning our app js bundle becomes slightly bigger after this.

Is that right? If so, I am curious how much faster this ends up being. If you have time, would be cool to see a before/after performance metric for this somehow after we deploy.

@astone123
Copy link
Collaborator Author

@wweitzel yeah lighthouse doesn't show much of a difference in local testing as far as I can tell - bottom line is that we'll be shipping less JS to the browser though, which I think is good. No crazy performance gains though

@wweitzel wweitzel merged commit cfb3bca into master Nov 30, 2023
4 checks passed
@wweitzel wweitzel deleted the optimize-bootstrap branch November 30, 2023 16:34
wweitzel added a commit that referenced this pull request Nov 30, 2023
wweitzel added a commit that referenced this pull request Nov 30, 2023
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.

2 participants