[DataGrid] Reduce bundle size with error messages #12992
Merged
+38
−31
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
oliviertassinari
added
performance
component: data grid
|
Deploy preview: https://deploy-preview-12992--material-ui-x.netlify.app/ |
MBilalShafi
approved these changes
May 4, 2024
|
I pushed a new commit, it didn't work, let's see if this is enough. Edit: It seems to be good. Asking for review from Alexandre as it's a follow-up on #11303. |
LukasTy
changed the title
cherniavskii
approved these changes
May 10, 2024
There was a problem hiding this comment.
Thanks!
With component stacks, we should be able to replace propTypes completely 👍🏻
arthurbalduini
pushed a commit
to arthurbalduini/mui-x
that referenced
this pull request
May 23, 2024
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.
Problem
Open https://mui.com/x/react-data-grid/, see how we load unless code in the JS bundle:
It increases the bundle size reported in https://bundlephobia.com/package/@mui/x-data-grid 🙃.
Solution
The most popular minifiers, esbuild seem to win https://npmtrends.com/esbuild-vs-terser-vs-uglify-js. A quick reproduction: https://esbuild.github.io/try/#YgAwLjIwLjIAeyBtaW5pZnk6IHRydWUsIGJ1bmRsZTogdHJ1ZSB9AABwcm9wVmFsaWRhdGlvbi5qcwBleHBvcnQgY29uc3QgcHJvcFZhbGlkYXRvcnMgPSBbKCkgPT4gJ2Vycm9yIG1lc3NhZ2UnXTsKCmV4cG9ydCBmdW5jdGlvbiB2YWxpZGF0ZVByb3BzKHByb3BzLCB2YWxpZGF0b3JzKSB7CiAgaWYgKHByb2Nlc3MuZW52Lk5PREVfRU5WID09PSAncHJvZHVjdGlvbicpIHsKICAgIHJldHVybjsKICB9CiAgdmFsaWRhdG9ycy5mb3JFYWNoKCh2YWxpZGF0b3IpID0+IHt9KTsKfQBlAERhdGFHcmlkLmpzAGltcG9ydCB7oHZhbGlkYXRlUHJvcHMsIHByb3BWYWxpZGF0b3JzIH0gZnJvbSAnLi9wcm9wVmFsaWRhdGlvbic7CgpleHBvcnQgZGVmYXVsdCBmdW5jdGlvbiBEYXRhR3JpZChwcm9wcykgewogIHZhbGlkYXRlUHJvcHMocHJvcHMsIHByb3BWYWxpZGF0b3JzKTsKICByZXR1cm4gImZvbyI7Cn0
I thought it was because the function isn't treated as pure by default by minifiers, why our Babel transformers add those
/*#__PURE__*/in https://unpkg.com/browse/@mui/x-data-grid@7.3.2/DataGrid/DataGrid.js. But it doesn't seem to be this. So I went with the simplest solution.Preview: https://deploy-preview-12992--material-ui-x.netlify.app/x/react-data-grid/
Off-topic: I think a reason why we need #5550. It would have been caught when we introduced this regression in #11303.