multiple or single imports in es6 with webpack

Question

I am developing a javascript SPA with React/React boilerplate and material UI. In the code snippets on the material ui site I see:

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';

However, this works just as well:

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

My question is, which is the preferable syntax and why?

Answer 1

Without any Tree Shaking or anything of the sort, the difference between these two approaches is that:

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

Actually adds EVERYTHING from '@material-ui/core/' to your bundle.

If you indeed only use a subset of it, going for the:

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';

... would result in a significantly smaller bundle!