title: React: Importing modules with object destructuring, or individually?
body: <p>In React, some packages allow you to import Components using either individual assignment: <code>import Card from "@material-ui/core/Card"</code>, or via object destructuring: <code>import { Card } from "@material-ui/core"</code>. </p>
  
  <p>I read in a Blog that using the object destructuring syntax can have performance ramifications if your environment doesn't have proper tree-shaking functionality. The result being that <em>every</em> component of <code>@material-ui/core</code> is imported, not just the one you wanted.</p>
  
  <p>In what situations could using object destructuring imports cause a decline in application performance and how serious would the impact be? Also, in an environment that <em>does</em> have all the bells and whistles, like the default create-react-app configuration, will using one over the other make <em>any</em> difference at all?</p>