docs(pages/gotchas): add 'Minimizing Bundle Size' section #6991
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
… to mitigate long build times and minimize bundle size for the end user
|
MichaelDeBoey
requested changes
Nov 1, 2023
|
|
||
| ## Minimizing Bundle Size | ||
|
|
||
| As you continue to develop you may start including larger packages and notice an impact on your build time. There are a few things you can do to minimize your build times that'll also end up being great for your end user (less javascript, faster load times!). Often times larger packages will centralize a location to easily import components or hooks into your app, this is great for convenience but can make it difficult for the compiler to tree shake out code that isn't used. |
There was a problem hiding this comment.
Suggested change
| As you continue to develop you may start including larger packages and notice an impact on your build time. There are a few things you can do to minimize your build times that'll also end up being great for your end user (less javascript, faster load times!). Often times larger packages will centralize a location to easily import components or hooks into your app, this is great for convenience but can make it difficult for the compiler to tree shake out code that isn't used. | |
| As you continue to develop you may start including larger packages and notice an impact on your build time. There are a few things you can do to minimize your build times that'll also end up being great for your end user (less JavaScript, faster load times!). Often times larger packages will centralize a location to easily import components or hooks into your app. This is great for convenience, but can make it difficult for the compiler to tree shake out code that isn't used. |
| import { Button, TextField } from '@mui/material'; | ||
| ``` | ||
|
|
||
| Here Button and TextField are imported from the top-level index of the MUI package, this won't have a massive effect on users but can create more work for the compiler giving you longer build times. Instead you can do the following: |
There was a problem hiding this comment.
Suggested change
| Here Button and TextField are imported from the top-level index of the MUI package, this won't have a massive effect on users but can create more work for the compiler giving you longer build times. Instead you can do the following: | |
| Here `Button` and `TextField` are imported from the top-level index of the MUI package, this won't have a massive effect on users but can create more work for the compiler giving you longer build times. Instead you can do the following: |
Comment on lines
+202
to
+203
| import Button from "@mui/material/Button"; | ||
| import TextField from "@mui/material/TextField"; |
There was a problem hiding this comment.
Suggested change
| import Button from "@mui/material/Button"; | |
| import TextField from "@mui/material/TextField"; | |
| import { Button } from "@mui/material/Button"; | |
| import { TextField } from "@mui/material/TextField"; |
|
|
||
| This lessens the work the compiler has to do and guarantees a smaller overall bundle size. | ||
|
|
||
| Sometimes you may also import packages that you intend for server use only. Sometimes this will cause immediate errors, but other times the compiler may try adding polyfills that increase your overall bundle size. Take for example core node modules like node:crypto. |
There was a problem hiding this comment.
Suggested change
| Sometimes you may also import packages that you intend for server use only. Sometimes this will cause immediate errors, but other times the compiler may try adding polyfills that increase your overall bundle size. Take for example core node modules like node:crypto. | |
| Sometimes you may also import packages that you intend for server use only. Sometimes this will cause immediate errors, but other times the compiler may try adding polyfills that increase your overall bundle size. Take for example core Node modules like `node:crypto`. |
| } | ||
| ``` | ||
|
|
||
| Importing crypto this way could lead to the bundler including polyfills for crypto into your client build even if it wasn't directly used on the client. An easy way to get around this is to centralize server imports inside a .server file. For example: |
There was a problem hiding this comment.
Suggested change
| Importing crypto this way could lead to the bundler including polyfills for crypto into your client build even if it wasn't directly used on the client. An easy way to get around this is to centralize server imports inside a .server file. For example: | |
| Importing crypto this way could lead to the bundler including polyfills for crypto into your client build even if it wasn't directly used on the client. An easy way to get around this is to centralize server imports inside a `.server` file. For example: |
| export { fs, crypto }; | ||
| ``` | ||
|
|
||
| ```tsx good filename=app/routes/some/route.tsx |
There was a problem hiding this comment.
Suggested change
| ```tsx good filename=app/routes/some/route.tsx | |
| ```tsx good filename=app/routes/some-route.tsx |
MichaelDeBoey
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I created a discussion around minimizing build time and bundle size, wanted to add this to gotchas for the Remix docs since it can be easy to include very large packages or polyfills by accident. I tagged along at the end of the gotcha page a section on tree shaking larger packages, and ensuring server only files aren't having polyfills added to your client bundle mistakenly.
Please let me know any revisions or what else I should do to help get this through as I believe it could be really useful to developers both as they start to develop with Remix and as their application becomes larger and build times increase.