时间戳

首页 > 解决方案 > 逐类导入还是整个模块导入，哪个最好？

javascript - 逐类导入还是整个模块导入，哪个最好？

问题描述

我正在开发一个 ReactJS 应用程序，我可以通过两种方式从库中导入类。第一个是使用一个导入子句并在括号中指定我想要的类：

import { makeStyles, CssBaseline, Box } from '@material-ui/core';

第二个是在不同的导入子句中指定每个类：

import makeStyles from '@material-ui/core/makeStyles';
import CssBaseline from '@material-ui/core/CssBaseline';
import Box from '@material-ui/core/Box';

这两种方法有什么区别？哪个最好？

标签： javascriptreactjsecmascript-6

解决方案

直接来自文档：

为方便起见，Material-UI 在顶层 material-ui 导入中公开了其完整的 API。如果您使用的是 ES6 模块和支持 tree-shaking 的捆绑器（webpack >= 2.x，带有标志的包裹），您可以安全地使用命名导入，并且在您的包中只期望最少的 Material-UI 组件集：

import { Button, TextField } from '@material-ui/core';

请注意，tree-shaking 是一种优化，通常仅适用于生产包。开发包将包含完整的库，这可能会导致启动时间变慢。如果您从 @material-ui/icons 导入，这一点尤其明显。

您可以使用路径导入来避免引入未使用的模块。

//  Fast
import Button from '@material-ui/core/Button';

https://material-ui.com/guides/minimizing-bundle-size/

推荐阅读