為 webpack 包大小導入文件的更好方法

Question

鈎子/index.js

export { default as useDialog } from './useDialog'
export { default as useCurrencies } from './useCurrencies'
export { default as useUser } from './useUser'

假設我在hooks文件夾中有 3 個文件（ useDialog ， useCurrencies ， useUser ）。 我想從此文件夾進行正確的導入。 現在我做這樣的導入：

import {useDialog} from 'hooks'

導入這個文件是正確的方法，還是像import useDialog from 'hooks/useDialog'那樣導入更好？ 什么更適合我的捆綁包尺寸？

Answer 1

您可以自己嘗試並比較生產前后的捆綁包大小。 如果有人需要，我將解釋如何做。

首先使用從索引導入的代碼執行這些步驟： import {useDialog} from 'hooks'

yarn build
serve -s build

在隱身模式下打開本地地址（http://localhost:5000/）。 然后打開檢查 -> 覆蓋率。

在底部你可以看到大小。 例如：目前已使用 2.1MB 中的 1.2MB (55%) 未使用 964kB

然后更改您的代碼並直接從文件中導入： import useDialog from 'hooks/useDialog' ，然后重復構建並檢查大小。

如果文件太小，您可能不會注意到差異，但如果有任何大文件或導入大型外部庫的文件，您會注意到。

我在我的項目中嘗試了這種比較，並且有一個文件導入和使用時刻。 我什至沒有使用這個組件，但是由於我從同一個索引中導入了另一個組件，所以捆綁包的大小增加了。

之前我總是從'hooks'類的文件夾中導入，但從現在開始，我將始終直接從文件'hooks/useDialog'導入。

我只是分享我的經驗，請在您自己的項目中比較捆綁包！