search

ambar / vscode-bundle-size

Display the bundle size of npm packages: https://marketplace.visualstudio.com/items?itemName=ambar.bundle-size
33 stars 1 forks source link

Sum of 2 separately imported items does not equal import size when imported together #10

Closed dgh328 closed 1 year ago

dgh328 commented 1 year ago

Scenario 1: Screen Shot 2023-04-18 at 8 34 56 PM

Scenario 2: Screen Shot 2023-04-18 at 8 34 46 PM

The numbers do not add up to the same size. Why?

ambar commented 1 year ago

@dgh328 95.5% of each icon's size is runtime helpers, this is actually something that antd can optimize.

You can hover over the size message to see the exact package file composition:

Input | Files | Size | Percent
-- | -- | -- | --
<bundle>.js |   | 19.62KB | 100%
↪ @ctrl/tinycolor | dist/module/css-color-names.js (2.89KB), dist/module/format-input.js (2.1KB), dist/module/conversion.js (1.17KB), dist/module/util.js (558B) | 6.71KB | 34.2%
↪ @ant-design/icons | es/utils.js (1.93KB), es/components/AntdIcon.js (898B), es/components/IconBase.js (882B), es/components/twoTonePrimaryColor.js (220B), es/icons/LogoutOutlined.js (159B), es/components/Context.js (58B), es/icons/index.js (0B) | 4.1KB | 20.9%
↪ @babel/runtime | helpers/esm/objectSpread2.js (572B), helpers/esm/iterableToArrayLimit.js (387B), helpers/esm/unsupportedIterableToArray.js (295B), helpers/esm/toPrimitive.js (260B), helpers/esm/objectWithoutProperties.js (247B), helpers/esm/typeof.js (230B), helpers/esm/nonIterableRest.js (173B), helpers/esm/objectWithoutPropertiesLoose.js (137B), helpers/esm/defineProperty.js (127B), helpers/esm/arrayLikeToArray.js (106B), and 3 other files (161B) | 2.63KB | 13.4%
↪ rc-util | es/Dom/dynamicCSS.js (1.57KB), es/warning.js (282B), es/Dom/contains.js (125B), es/Dom/canUseDom.js (90B) | 2.06KB | 10.5%
↪ @ant-design/colors | es/generate.js (1.35KB), es/index.js (543B) | 1.88KB | 9.6%
↪ @ant-design/icons-svg | es/asn/LogoutOutlined.js | 908B | 4.5% # Oops, the actual icon size
↪ classnames | index.js | 695B | 3.5%