1

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?

pgee70
  • 3,707
  • 4
  • 35
  • 41

2 Answers2

3

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!

ccjmne
  • 9,333
  • 3
  • 47
  • 62
0

From my point of view, the second one is slightly better, because you don't need to know the internals of the lib that you're using. In that way, if they change the structure of the folders, you won't be affected by that.

Alan
  • 470
  • 4
  • 10