@KBBS

Обработка путей к импортируемым модулям с использованием webpack?

Здравствуйте.
Предположим, что есть примерно такая структура директорий:
components
    component1
        Component1.vue
    component2
        Component2.vue
    component3
        Component3.vue
    index.js
app.js

В ./components/index.js написано примерно следующее:
export { default as Component1 } from './component1/Component1.vue';
export { default as Component2 } from './component2/Component2.vue';
export { default as Component3 } from './component3/Component3.vue';

Другими словами, index.js - как бы единая точка входа, в которой происходит просто реэкспорт всех компонентов.

Предположим, мне в Component2 требуется Component1.
Я его импортирую напрямую с указанием относительного пути относительно Component2.
// File ./components/component2/Component2.vue

import Component1 from '../component1/Component1.vue';

А в ./app.js, предположим, мне нужен и Component1 и Component2.
Но импортировать я их буду уже через наш ./components/index.js.
// File ./app.js

import { Component1, Component2 } from './components/index.js';


Сколько раз в результате будет загружен Component1?
Мы же его импортируем два раза и разными способами.
Или webpack достаточно умный, чтобы обрабатывать подобные случаи?

UPDATE

Проверил вариант с использованием только index.js, и в дэв и в прод сборках финальный размер сборки не меняется. Из чего я делаю вывод, что webpack всё же достаточно умный.
Но вообще есть ли какая-то разница? Может вариант из примера по каким-то причинам не рекомендуется, или ещё что-то?

Спасибо.
  • Вопрос задан
  • 53 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы