Modules import and destructuring performances

If you use Webpack, the destructuring syntax should help remove unused Javascript from the output file, because Webpack supports Tree-Shaking, provided the following conditions are met (quoted from webpack's website):

• Use ES2015 module syntax (i.e. import and export).
• Ensure no compilers transform your ES2015 module syntax into CommonJS modules (this is the default behavior of popular Babel preset @babel/preset-env - see documentation for more details).
• Add a "sideEffects" property to your project's package.json file.
• Use production mode configuration option to enable various optimizations including minification and tree shaking.

Yes that is correct. By doing this:

import {RaisedButton} from 'material-ui'

The root library file of 'material-ui' will be included. Inside of that file, it will likely have a lot of import RaisedButton from './RaisedButton' statements to include all the components of the library at once (see https://github.com/callemall/material-ui/blob/master/src/index.js).

Doing:

import RaisedButton from 'material-ui/RaisedButton'

all the time will gurantee better performance in terms of bundle size as you will only be getting only the dependencies you need. If you only use a few components, this will also improve the build speed as it will not need to parse the files for the other components in the library.

If you are using all or almost all the components in the library, the build performance should be about the same because if both the root script of 'material-ui' and your file both require the same component twice, your bundler will be smart enough to cache the result and will not re-parse the files. Your bundler will make over-importing the same thing a cheap operation in this case.

I'd recommend using the import RaisedButton from 'material-ui/RaisedButton' syntax as this is more adaptive to your needs over time as you may not always need all the components and it will be unlikely that you are using all of them at once. Additionally some bundlers such as webpack support bundle splitting which wouldn't be easy with the import {RaisedButton} from 'material-ui' method.