Skip to content

[Bug]: Compat components significantly increase bundle size #34638

Closed
@Sinled

Description

@Sinled

Component

TimePicker (Compat)

Package version

9.61.6

React version

18.2

Environment

System:
    OS: macOS 15.5
    CPU: (10) arm64 Apple M1 Max
    Memory: 70.48 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Chrome: 137.0.7151.69
    Edge: 137.0.3296.68
    Safari: 18.5
  npmPackages:
    @fluentui/react: 8.106.3 => 8.106.3 
    @fluentui/react-components: 9.61.6 => 9.61.6 
    @fluentui/react-experiments: 8.14.57 => 8.14.57 
    @fluentui/react-icons: 2.0.274 => 2.0.274 
    @fluentui/react-icons-mdl2: 1.3.34 => 1.3.34 
    @fluentui/react-timepicker-compat: 0.3.12 => 0.3.12 
    @types/react: ^18.0.28 => 18.0.31 
    @types/react-dom: ^18.0.11 => 18.0.11 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0

Current Behavior

Adding TimePicker to project increase bundle size of application by approximately 30kb of minified and compressed code (100kb uncompressed). As i understand this is happening because this package uses separate packages for components such as @fluentui/react-combobox, @fluentui/react-field etc, and not @fluentui/react-components

Expected Behavior

Adding compat components to the application should not drastically increase bundle size

Reproduction

https://stackblitz.com/edit/p8yfgnpj-butprydl?file=package.json,src%2Fexample.tsx

Steps to reproduce

  1. Open https://stackblitz.com/edit/p8yfgnpj?file=package.json,tsconfig.json
  2. Select terminal and run npm run build, result should be something like dist/assets/index-CzvXxZKb.js 210.32 kB │ gzip: 66.17 kB
  3. Open another stackblitz instance https://stackblitz.com/edit/p8yfgnpj-butprydl?file=package.json,src%2Fexample.tsx with @fluentui/react-timepicker-compat added
  4. Select terminal and run npm run build, result will be dist/assets/index-CA-XsY-B.js 284.07 kB │ gzip: 91.51 kB

Are you reporting an Accessibility issue?

None

Suggested severity

High - No workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • The provided reproduction is a minimal reproducible example of the bug.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions