import { BottomSheet } results in 47.9kb gzipped import

[bscaspar]

I am working on reducing the bundle size of my app, but react-spring-bottom-sheet seems to have a significantly larger import size than any other library I use. I noticed the readme says 'gzip size: 6.31 kB' but both the import cost analyzer and bundle analyzer show that this import is significantly larger. I am using v3.4.0

Am I using this wrong? Why would the chunk be so large?

use:

import React from 'react';

import { BottomSheet } from 'react-spring-bottom-sheet';
import 'react-spring-bottom-sheet/dist/style.css';

import styles from './BottomSheetModal.module.scss';

type BottomSheetModalProps = {
  visible: boolean;
  children: React.ReactNode;
  onClose: () => void;
};

const BottomSheetModal = ({
  visible,
  children,
  onClose,
}: BottomSheetModalProps): JSX.Element => (
  <BottomSheet
    className={styles.bottomSheetModal}
    open={visible}
    onDismiss={onClose}
  >
    <div className={styles.bottomSheetModalContent}>{children}</div>
  </BottomSheet>
);

export default BottomSheetModal;

import cost analyzer output:

bundle-analyzer output:

[rossthedevigner]

I'm seeing the same thing. @bscaspar Have you found any clues?

[bscaspar]

Nothing yet, although I admittedly haven't focused on this much. Bundlephobia seems to disagree with the unpkg report on the readme: https://bundlephobia.com/package/react-spring-bottom-sheet@3.4.0

[pepew-le-boss]

Up