How to reduce bundle size | Import cost

[bryanltobing]

Current Behavior

The import cost is very expensive, and the size is still the same as the amount of components imported reduced

Expected behavior

The import cost only takes on what component is being used

Suggested solution(s)

I have tried few things such as reducing reexporting components, but it doesn't work

Additional context

N / A

Your environment

System:
    OS: Windows 10 10.0.22000
    CPU: (16) x64 AMD Ryzen 7 5800H with Radeon Graphics
    Memory: 2.47 GB / 13.86 GB
  Binaries:
    Node: 16.13.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD
  Managers:
    Cargo: 1.61.0 - ~\.cargo\bin\cargo.EXE
  Utilities:
    Git: 2.34.1. - /mingw64/bin/git
  IDEs:
    VSCode: 1.68.1 - C:\Users\bryan\AppData\Local\Programs\Microsoft VS Code\bin\code.CMD
  Languages:
    Bash: 4.4.23 - C:\Program Files\Git\usr\bin\bash.EXE
    Perl: 5.34.0 - C:\Program Files\Git\usr\bin\perl.EXE
    Rust: 1.61.0 - /c/Users/bryan/.cargo/bin/rustc
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (102.0.1245.44)
    Internet Explorer: 11.0.22000.120

[aladdin-add]

I think it's import-cost does not consider tree-shaking, not sure what can do in the dts?

[bryanltobing]

I'm not sure myself whether it makes performance slower or not. But it feels like a bad practice, where we only need part of the library but when we import it, all the things in the library got imported

[aladdin-add]

Not true. All the modern bundlers support tree-shaking, so you are not importing all the things. ofc, you can also use something like

import {FAIcon} from "@hzn-one/flex-hzn/faicon";
import {FAAvatar} from "@hzn-one/flex-hzn/faavatar";
...

but the sounds a bad DX. ╮(￣▽￣)╭

[aboveyunhai]

I'm not sure myself whether it makes performance slower or not. But it feels like a bad practice, where we only need part of the library but when we import it, all the things in the library got imported

Import cost is just a fancy plugin that helps you analyze your package statically. It neither reflects the true bundle size nor tree shaking. When you make your production build you should see the actual size for each page depending on which framework you are using.

If you don't understand it maybe just remove the plug-in, it only makes you feel bad I guess.

[bryanltobing]

If you don't understand it maybe just remove the plug-in, it only makes you feel bad I guess.

Yes, I'm still new to this package management system. I thought that import cost extension can help to analyze my package cost

But I'm curious. It (import cost) works great with other deps hosted in npm for example I use @mui/material

import { Box, Stack } from "@mui/material" // the size number of import cost will grow as we add more component. and when we only import one component the number would relative small

but in my package

import {  FAButton } from "@hzn-one/flex-hzn" // importing only one component bring all the bundle size number of `import cost`, 
// as we added more component
import { FAButton, FAAvatar } from "@hzn-one/flex-hzn" // the size number doesn't change