@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 всё же достаточно умный.
Но вообще есть ли какая-то разница? Может вариант из примера по каким-то причинам не рекомендуется, или ещё что-то?

Спасибо.
  • Вопрос задан
  • 32 просмотра
Пригласить эксперта
Ответы на вопрос 1
Aleksandr-JS-Developer
@Aleksandr-JS-Developer
Бери и делай
Если сборка не увеличилась - значит на машинном уровне проблем, вроде, нет. Хотя надо смотреть performance в дев тулах детальнее. Webpack довольно-таки умная штука. И разрабы webpack тоже довольно бошкавитые дяди. Не даром webpack Vue-cli использует.
проверить 'руками'
Попробуйте собрать минимальную, почти пустую, сборку с импортом объектов и намутить что-то с импортами. А потом посмотреть на собранный файл в дев моде. Сразу станет понятно, что там да как.


Но есть ещё один уровень. Чуть ли не важнее машинного. А именно - человеческий.
Важно, чтобы программист, который будет смотреть ваш код впервые (это можете быть вы через неделю :D ), не запутался. Чтобы одного взгляда стало достаточно для того, чтобы понять происходящее, а не надо было десять минут лазить по index.js`ам и искать, доступен ли мне отсюда такой-то модуль или нет.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы