Open2023/04/15にコメント追加1

re-exportをしてコンテンツダウンロードが爆増してしまった話

前提

Next.js（12.2.4）で検証

まずどんな状態？

下記はUIコンポーネントの基礎パーツをまとめてre-exportしています。
一部を例に出しているのですが、本当はもっとたくさんのコンポーネントをre-exportされている。

/* Box */
export * from './Box/CmBox'
export * from './Box/CmForwardBox'
export * from './Box/CmScrollBox'
/* Button */
export * from './Button/CmAddIconButton'
export * from './Button/CmButton'
export * from './Button/CmIconButton'
/* Card */
export * from './Card/CmCard'
export * from './Card/CmItemCard'
export * from './Card/CmMessageCard'
/* Container */
export * from './Container/CmContainer'
/* Date */
export * from './Date/CmButtonDatePicker'
export * from './Date/CmDatePicker'

検証

下記のimportをする。

import { CmButton } from 'components/uiParts/Button/CmButton'

コンテンツダウンロードと変換されたjsファイルの行数を確認するとこんな感じ

次はまとめてre-exportをしているファイルからimportをする

import { CmButton } from 'components/uiParts'

めちゃくちゃ増えてるー😢

今後

re-exportをすることによってまとめてimportができたりというメリットがあったのでそうしていたのですが、今後はre-exportをすることによってまとめてjsファイルに書き出されることを意識して、あまり使わないようにする。
vscodeのAuto Importを使えば自動でimportもできたりするのであまりimportしているところの見た目を気にしないようにするのも大事かもしれない。。