Three-shaking not working properly

[anas-araid]

Describe the bug

I'm trying to import a specific icon using named imports ex. import { Agenda } from './icons';

After running npm run build, Vite is including all other icons defined in index.ts during build time so unnecessary code is being included in the final build.

Expected behavior:
When importing a specific icon/component using named imports, only the necessary code for that icon should be included in the final build.

Reproduction

https://stackblitz.com/edit/vitejs-vite-hujhcm

Steps to reproduce

• Run npm run build
• Open the js file in the dist directory
• Find the unnecessary icons by searching these displayName -> "alarm" or "addCircle"

System Info

Stackbliz:
 System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm
  npmPackages:
    @vitejs/plugin-react: ^3.1.0 => 3.1.0 
    vite: ^4.2.1 => 4.2.1 

Macbook:
  System:
    OS: macOS 13.1
    CPU: (8) x64 Apple M1
    Memory: 18.88 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
  Browsers:
    Chrome: 111.0.5563.64
    Firefox: 109.0.1
    Safari: 16.2
  npmPackages:
    @vitejs/plugin-react: ^3.0.0 => 3.0.1
    vite: ^4.2.1 => 4.2.1

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-hujhcm (Open reproduction)

[sapphi-red]

There's two side effects preventing tree-shaking to work.
The first one is the forwardRef call. This function call can throw an error. So this cannot be tree-shaked.
The second one is the assignment to displayName property. This can also throw an error.

So to mark these as side-effect free, you have to write it like:

const SvgAlarm = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => ( /* omit */ )

const ForwardRef = /* #__PURE__ */ (() => {
  const r = forwardRef(SvgAlarm);
  r.displayName = 'alarm';
  return r;
})()

Closing as this is not a bug.

[anas-araid]

Thanks @sapphi-red! During build time this solution works fine! Is there a way to achieve the same thing in development mode?

[sapphi-red]

There aren't any builtin solutions, but it seems there's a plugin: #8237 (comment)