Open1
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しているところの見た目を気にしないようにするのも大事かもしれない。。