Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Iconインデックスファイルの参照方法によるバンドルサイズ増加とTree Shakingの課題 #1174

Open
kc7891 opened this issue Nov 13, 2024 · 1 comment · May be fixed by #1182
Assignees

Comments

@kc7891
Copy link
Contributor

kc7891 commented Nov 13, 2024

概要

SpindleUIのコンポーネントで
import { CheckBold } from '/icon' のようにアイコンのインデックスファイルを参照しており、
Tree Shakingが効かない環境で、未使用のアイコンも含め全アイコンがバンドルに含まれてしまいます。
これにより、バンドルサイズが増加し、パフォーマンスに悪影響な可能性があります。

期待する動作

使用するアイコンのみがバンドルに含まれること。

解決策の提案

個別インポート: アイコンをインデックスファイル経由ではなく、個別ファイル(例:import notice from '/icon/checkbold')から直接インポート。

メリット

バンドルサイズ削減とパフォーマンス改善

対応箇所

import { CheckBold } from '../Icon'; のような実装全て

@kc7891 kc7891 self-assigned this Nov 13, 2024
@kc7891
Copy link
Contributor Author

kc7891 commented Nov 14, 2024

https://ast-grep.github.io/advanced/find-n-patch.html#intriguing-example
ast-grepを使って一括置換すると良さそう

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant