lucide reactでアイコンを使う

Cursor

Lucide Iconsはページ表示速度に影響を与えるのか

Next.jsではTree Shaking(使っていないコードを削る機能)が自動で働くため、ビルド時に、「実際に使ったSVGデータ」だけがJS bundleに同梱される

インポートの書き方が正しければ、ページの表示速度(LCP)に与える悪影響はほぼゼロ

import { Sparkles, Check } from 'lucide-react';

と書けば、追加されるファイルサイズは数KB程度。逆に

import * as Icons from 'lucide-react';

と書いてしまうと、Lucideが持つ数千個のアイコンデータが全てJ Sファイルにバンドルされてしまうのでだめ

BACK