[Q/A] How to reduce large bundle size, using @ant-design/icons

[Dolov]

What happened?

Hi
i use plasmo to dev my plugin happy, but when i build my plugin, i found that my build bundle size large

i install antd, and use Modal component, the build bundle size 2.3M

Is there any way to optimize

this is all i import

import React from 'react'
import { useStorage } from "@plasmohq/storage/hook"
import { List, message, Input, Button, Switch, Tooltip, Modal, Form } from 'antd'
import { CopyFilled, DeleteFilled, SettingFilled } from '@ant-design/icons'

Thanks

Version

Latest

What OS are you seeing the problem on?

MacOSX

What browsers are you seeing the problem on?

No response

Relevant log output

No response

(OPTIONAL) Contribution

• I would like to fix this BUG via a PR

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

[louisgv]

It's likely due to the icons package more so than the modal. Try remove any ref to icons and see if your bundle size reduced. If that works, I'd fix all your icon import to be path-specific so that the tree shaker know which icon to specifically bundle.

Another way to solve this is to submit a PR to ant-design/icons and urge them to fix their package.json to follow the ESM module "specs" (it's not really a specs per-se, but it's how nodejs resolves ESM module to tree-shake). Basically it needs an exports that tells the module resolver where each files/import are.