Какой способ импорта Bootstrap модуля в компонент Vue лучше использовать?

Question

[Sergey Nikolaev]

Пишу приложение с использованием Vuejs. И вот в один из компонентов Vue понадобилось добавить модальное окно от Bootstrap. Bootstrap храниться в node_modules

Для этого в файле с расширением .vue в разделе <script> я могу использовать два способа импорта

import { Modal } from 'bootstrap' (файл берется отсюда "bootstrap/dist/js/bootstrap.js")

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

Чем эти способы отличаются? Какой способ импорта будет работать быстрее и почему? Как называется этот раздел в JavaScript, чтобы я мог почитать об этом подробнее?

Comments

[xdevelx]

Пишите приложение на vue, а банальных вещей не знаете. Для начала стоило заглянуть в package.json, чтобы посмотреть из какого файла будет выполняться импорт https://github.com/twbs/bootstrap/blob/main/packag...

[Sergey Nikolaev]

xdevelx,

Для начала стоило заглянуть в package.json, чтобы посмотреть из какого файла будет выполняться импорт

Это я посмотрел.

Но ответ мне все-же не ясен. Какой вариант будет работать быстрей? В каком случае будет меньше тянуться неиспользованных скриптов?

Ведь в обоих случаях импортируются отдельные модули Bootstrapa.

И, да, я учусь, поэтому такие вопросы и задаю. Если задавать не буду, откуда же я узнаю как лучше? Подскажите где об этом почитать можно, буду благодарен.

[Aetae]

xdevelx, на самом деле на строчку ниже. Если есть module - современные системы используют его, а не старый main.)

[xdevelx]

Aetae, Я отметил строку, с которой начинаются definitions. Для es6 модулей импорт будет из module definition.

Answer 1

[Aetae]

В первом случае вы в теории тащите весь bootstrap во втором только modal. Однако на деле нет никакой разницы, потому что все популярные системы сборки умеют в tree-shaking, т.е. оставляют в бандле только то, что используется.
Разницы в скорости нет.

Единственное что вам следует выбрать один вариант и ему следовать, иначе в случае bootstrap получится дублирование кода. Что кстати странно, обычно корневой файл содержит просто реэкспорт тех же самых отдельных модулей, а не копии.