react-jsonschema-form: @rjsf/material-ui breaks tree shaking

Prerequisites

Description

Importing @rjsf/material-ui into a project bundled with esbuild causes bundle size to increase a lot.

This seems to be because of https://github.com/rjsf-team/react-jsonschema-form/blob/master/packages/material-ui/src/Theme5/Mui5Context.tsx#L11, which causes the entire @mui/icons-material package to be included in the bundle.

Bundle size with @rjsf/material-ui included: 6,9M Bundle size without @rjsf/material-ui: 2,4M

Steps to Reproduce

  1. Include @rjsf/material-ui in a project
  2. Bundle it using a tree-shaking enabled bundler (like esbuild)
  3. Compare bundle sizes before and after @rjsf/material-ui inclusion

Expected behavior

The icons should be tree-shaken and only icons used by the application should be included in the bundle.

Actual behavior

All icons from the @mui/icons-material package are included in the bundle.

Version

        "@rjsf/core": "^4.0.1",
        "@rjsf/material-ui": "^4.0.1",

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Comments: 15 (13 by maintainers)

Most upvoted comments

@rollercodester @mdarocha I may try to meld the two approaches when I have time this weekend… Get a better approach to type handling that is highlighted in the PR by @rollercodester along with trying the /*#__PURE__*/ directive to get tree-shaking