mui / mui/material-ui

extendTheme utility included into final bundle, potential bundle size optimization

Open
#34,845 2 comments 0 reactions 1 assignee View on GitHub

@siriwatknp is already working on this.

Since Oct 25, 2022.

package: joy-ui performance scope: all components
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

Duplicates
  • I have searched the existing issues
Latest version
  • I have tested the latest version
Steps to reproduce 🕹

Just installing the latest @mui/joy into the project. Analysing bundle size i noticed that extendTheme utility (~12kb size) is included into the production bundle. I am using default next.js with official create-next-app.

I was wondering if this is necessary? My understanding is that extendTheme utility is used to merge default and custom theme but if no custom theme is used I do not see why it would be included.

Current behavior 😯

extendTheme utility (~12kb size) is included with final bundle even though it is not imported anywhere.

Expected behavior 🤔

extendTheme utility (~12kb size) is NOT included with final bundle if it is not imported inside the project. If it is imported for custom theme support then it is of course logical that it is included.

Context 🔦

Just trying to optimize bundle size because ~12kb is 15% of the whole size of @mui/joy that is imported into my project/case.

Your environment 🌎
npx @mui/envinfo
  System:
    OS: macOS 12.6
  Binaries:
    Node: 16.17.1 - ~/.volta/tools/image/node/16.17.1/bin/node
    Yarn: 1.22.18 - ~/.volta/tools/image/yarn/1.22.18/bin/yarn
    npm: 8.15.0 - ~/.volta/tools/image/node/16.17.1/bin/npm
  Browsers:
    Chrome: 106.0.5249.119
    Edge: Not Found
    Firefox: Not Found
    Safari: 16.0
  npmPackages:
    @emotion/react: ^11.10.4 => 11.10.4
    @emotion/styled: ^11.10.4 => 11.10.4
    @mui/base:  5.0.0-alpha.101
    @mui/core-downloads-tracker:  5.10.9
    @mui/icons-material: ^5.10.9 => 5.10.9
    @mui/joy: ^5.0.0-alpha.49 => 5.0.0-alpha.49
    @mui/material:  5.10.9
    @mui/private-theming:  5.10.9
    @mui/styled-engine:  5.10.8
    @mui/system:  5.10.9
    @mui/types:  7.2.0
    @mui/utils:  5.10.9
    @types/react: 18.0.21 => 18.0.21
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    typescript: 4.8.4 => 4.8.4

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.