Question

我正在使用React / React样板和material UI开发一个javascript SPA。在material ui site上的代码段中，我看到了：

import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableFooter from '@material-ui/core/TableFooter';

然而，这也适用：

import {Table,TableBody,TableCell,TableFooter} from '@material-ui/core/';

我的问题是，哪个是更好的语法？为什么？

Answer 1

没有任何Tree Shaking或任何类型，这两种方法之间的区别在于：

import {Table,TableBody,TableCell,TableFooter} from '@material-ui/core/'

实际上将'@material-ui/core/'中的一切添加到您的捆绑包中。

如果你确实只使用了它的一个子集，请选择：

import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableFooter from '@material-ui/core/TableFooter';

...会导致一个明显更小的捆绑！

Answer 2

从我的观点来看，第二个稍微好一些，因为你不需要知道你正在使用的lib的内部。这样，如果他们改变文件夹的结构，你就不会受到影响。

使用webpack在es6中进行多个或单个导入

2 个答案: