What is the best way to import a Bootstrap module into a Vue component?

Question

JavaScript

I am writing an application using Vuejs. And in one of the Vue components, it was necessary to add a modal window from Bootstrap. Bootstrap is stored in node_modules

To do this, in a file with an extension .vuein the section, <script>I can use two import methods (the file is taken from here "bootstrap/dist/js/bootstrap.js") and How do these methods differ? Which import method will work faster and why? What is the name of this section in JavaScript so I can read more about it?

import { Modal } from 'bootstrap'

import Modal from 'bootstrap/js/dist/modal'

Answer 1

In the first case, in theory , you drag everything bootstrapin the second only modal. However, in reality there is no difference, because all popular build systems are able to tree-shaking, i.e. leave in the bundle only what is used.
There is no difference in speed.
The only thing is that you should choose one option and follow it, otherwise in the case of bootstrap you will end up with code duplication. Oddly enough, usually the root file just contains re-exports of the same individual modules, not copies.