使用 webpack 在 es6 中进行多次或一次导入

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

在我看来，第二个稍微好一些，因为您不需要了解您正在使用的库的内部结构。这样，即使他们更改了文件夹的结构，您也不会受到影响。

Answer 2

没有任何 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';

... 会导致捆绑包明显变小！

使用 webpack 在 es6 中进行多次或一次导入

multiple or single imports in es6 with webpack

ecmascript-6

reactjs

webpack

material-ui

react-boilerplate