时间戳

首页 > 解决方案 > 为 webpack 包大小导入文件的更好方法

javascript - 为 webpack 包大小导入文件的更好方法

问题描述

钩子/index.js

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

假设我在hooks文件夹 ( useDialog, useCurrencies, useUser) 中有 3 个文件。我想从此文件夹进行正确的导入。现在我做这样的进口：

import {useDialog} from 'hooks'

导入这个文件是正确的方法，还是像这样导入更好import useDialog from 'hooks/useDialog'？什么对我的捆绑大小更好？

标签： javascriptwebpackbundle

解决方案

您可以自己尝试并比较生产前后的捆绑包大小。如果有人需要，我将解释如何做。

首先使用从索引导入的代码执行以下步骤：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'。

我只是分享我的经验！请比较您自己项目中的捆绑包！

推荐阅读