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

Question

我正在开发一个 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';

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

Answer 1

直接来自文档:

For convenience, Material-UI exposes its full API on the top-level material-ui import. If you're using ES6 modules and a bundler that supports tree-shaking (webpack >= 2.x, parcel with a flag) you can safely use named imports and expect only a minimal set of Material-UI components in your bundle:

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

Be aware that tree-shaking is an optimization that is usually only applied to production bundles. Development bundles will contain the full library which can lead to slower startup times. This is especially noticeable if you import from @material-ui/icons.

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

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

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