What is different between curly brace import and import from sub directory in ES6?

I am quite curious about these imports.

import Button from "react-bootstrap/lib/Button";
import { Button } from "react-bootstrap";

They both load button very well, but does it matter on final size of the bundle?

Yes, in fact, it does matter in regards to the final bundle size in this specific case. Per the React Bootstrap Documentation:

Bundle size optimization

If you install React-Bootstrap using npm, you can import individual components from react-bootstrap/lib rather than the entire library. Doing so pulls in only the specific components that you use, which can significantly reduce the size of your client bundle.

The emphasis is mine. The above confirms that importing from a specific file in a subdirectory at react-bootstrap/lib reduces bundle size as bundlers will not include the whole library which would happen if you imported directly from the library with import { Button } from ‘react-bootstrap’.

Another thing to note is that bundlers such as Webpack do have features such as tree-shaking to remove unnecessary modules when only importing a certain part of a library but it’s not working reliably with React Bootstrap yet, so prefer the first choice for bundle size optimization. As for other cases with other libraries, it depends on if tree-shaking can be reliably used, and in that case it shouldn’t matter which way you import a component of the library.