[DataGrid] Reduce bundle size with error messages #12992
Merged
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.