35k added to bundle for button only, 212k added for datefield/popup in vanilla vitejs based app

[waynebrantley]

Provide a general summary of the issue here

Adding the button only adds 35k to the bundle size.
Adding the datefield/popup only adds 212k to the bundle size.
This happens with just a vanilla app bundled by vitejs.
Perhaps that is the correct added size, but seems pretty big for a button or a date/picker.

The treeshaking issue has been surfaced several times like:
#5639
#5798
#6064

Many of these were nextjs related and/or have been fixed, but still seems to have issues.

🤔 Expected Behavior?

tree-shaking should limit size

😯 Current Behavior

too much code is left in the bundle

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

npm create vite@latest
choose reactjs, typescript app.
build the bundle.

Now add a simple button component, build the bundle.

In my example (adding tailwind/shadcn/etc) it looks like this:

Before button:
dist/index.html 0.46 kB │ gzip: 0.30 kB
dist/assets/react-CHdo91hT.svg 4.13 kB │ gzip: 2.05 kB
dist/assets/index-CMI2A-h5.css 6.16 kB │ gzip: 1.94 kB
dist/assets/index-CbpcZO_M.js 143.87 kB │ gzip: 46.33 kB

After button:
dist/index.html 0.46 kB │ gzip: 0.30 kB
dist/assets/react-CHdo91hT.svg 4.13 kB │ gzip: 2.05 kB
dist/assets/index-CrhXAnEL.css 10.18 kB │ gzip: 2.94 kB
dist/assets/index-Chdu1J8Y.js 200.10 kB │ gzip: 64.42 kB

After Date
dist/index.html 0.46 kB │ gzip: 0.30 kB
dist/assets/react-CHdo91hT.svg 4.13 kB │ gzip: 2.05 kB
dist/assets/index-ormNlinY.css 13.49 kB │ gzip: 3.58 kB
dist/assets/index-Dk_yFfAP.js 359.91 kB │ gzip: 116.25 kB

Imports for button:

import {
  Button as AriaButton,
  composeRenderProps,
  type ButtonProps as AriaButtonProps,
} from "react-aria-components"

imports for date/picker:

import {
  Button as AriaButton,
  Calendar as AriaCalendar,
  CalendarCell as AriaCalendarCell,
  CalendarCellProps as AriaCalendarCellProps,
  CalendarGrid as AriaCalendarGrid,
  CalendarGridBody as AriaCalendarGridBody,
  CalendarGridBodyProps as AriaCalendarGridBodyProps,
  CalendarGridHeader as AriaCalendarGridHeader,
  CalendarGridHeaderProps as AriaCalendarGridHeaderProps,
  CalendarGridProps as AriaCalendarGridProps,
  CalendarHeaderCell as AriaCalendarHeaderCell,
  CalendarHeaderCellProps as AriaCalendarHeaderCellProps,
  CalendarProps as AriaCalendarProps,
  DateValue as AriaDateValue,
  Heading as AriaHeading,
  RangeCalendar as AriaRangeCalendar,
  RangeCalendarProps as AriaRangeCalendarProps,
  RangeCalendarStateContext as AriaRangeCalendarStateContext,
} from "react-aria-components"

import {
  DatePicker as AriaDatePicker,
  DatePickerProps as AriaDatePickerProps,
  DateRangePicker as AriaDateRangePicker,
  DateRangePickerProps as AriaDateRangePickerProps,
  DateValue as AriaDateValue,
  Dialog as AriaDialog,
  DialogProps as AriaDialogProps,
  PopoverProps as AriaPopoverProps,
} from "react-aria-components"

import {
  DateField as AriaDateField,
  DateFieldProps as AriaDateFieldProps,
  DateInput as AriaDateInput,
  DateInputProps as AriaDateInputProps,
  DateSegment as AriaDateSegment,
  DateSegmentProps as AriaDateSegmentProps,
  TimeField as AriaTimeField,
  TimeFieldProps as AriaTimeFieldProps,
  TimeValue as AriaTimeValue,
  ValidationResult as AriaValidationResult,
} from "react-aria-components"

import {
  FieldError as AriaFieldError,
  FieldErrorProps as AriaFieldErrorProps,
  Group as AriaGroup,
  GroupProps as AriaGroupProps,
  Label as AriaLabel,
  LabelProps as AriaLabelProps,
  Text as AriaText,
  TextProps as AriaTextProps,
} from "react-aria-components"

import {
  Dialog as AriaDialog,
  DialogProps as AriaDialogProps,
  DialogTrigger as AriaDialogTrigger,
  Popover as AriaPopover,
  PopoverProps as AriaPopoverProps,
  composeRenderProps,
} from "react-aria-components"

Version

1.50

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

windows

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[reidbarber]

We are actively looking at ways to improve usePress (#7542), which is the bulk of the button bundle. For date picker, you check out the Optimizing bundle size section of the Internationalization docs.