使用Webpack2时，下面两条import语句有区别吗？

Question

I was taking a look at the documentation for an npm package and saw the following:

Notice that in the above example, we used:

import RaisedButton from 'material-ui/RaisedButton';

instead of

import {RaisedButton} from 'material-ui';

This will make your build process faster and your build output smaller.

When using Webpack2, is there a different between the two imports with regards to build speed and bundle size?

Answer 1

Yes. Both imports are different and they do affect the build time and build output.

When you are using import {RaisedButton} from 'material-ui'; , you are actually importing it from main index.js file, which is also exporting the other components. Therefore webpack endup bundling all the other components, which are exported in this file, in the bundle which increases bundle size and bundling time both.

But if you use import RaisedButton from 'material-ui/RaisedButton'; , then you are importing raised button from raised button's index.js , which is exporting raised button only. Therefore webpack will bundle only raised button and nothing else result in less bundle size and time.

Answer 2

Reading the docs for React Router, I've found the following:

If you're going for a really minimal bundle sizes on the web you can import modules directly. Theoretically a tree-shaking bundler like Webpack makes this unnecessary but we haven't tested it yet. We welcome you to!

 import Router from 'react-router-dom/BrowserRouter' import Route from 'react-router-dom/Route'

// etc.

So I think the answer is that when using Webpack, the two imports should result in the same bundle size in production, but doing something like import {RaisedButton} from 'material-ui'; may cause webpack to take a bit longer to bundle.