Динамический импорт подключает все файлы из папки?

Question

[Дмитрий]

Не знаю как наиболее понятно объяснить мою проблему. Попробую расписать по пунктам

1. Устанавливаю vue.js командой vue create <name>
2. Устанавливаю зависимость для наглядности npm i mdi-vue
3. Запускаю сервер npm run serve
Видим, что подключилось ~150 модулей. Ок
4. В документации к mdi-vue сказано, что для подключения иконок необходимо импортировать и регистрировать в ручную каждую иконку.
Я решаю создать компонент-обертку, который будет подключать эти иконки за меня.

components/icon.vue

<template>
  <component :is="getIcon" />
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true
    }
  },
  computed: {
    getIcon () {
      return () => import(`mdi-vue/${this.name}`) // Проблема здесь
    }
  }
}
</script>

5. Регистрирую этот компонент глобально

Vue.component('ui-icon', () => import('@/components/icon.vue')

6. Снова запускаю npm run serve

Вуаля. Теперь у нас подключается 20000+ модулей (иконок). Как так получилось?

Comments

[Aetae]

Очевидно что проблема в том, как вы написали этот ваш "компонент-обертку". Где код?

[Дмитрий]

Aetae, спойлер в 4 пункте

Answer 1

[Aetae]

Т.к. webpack при сборке никак не может знать, что у вас окажется в this.name, а проект должен работать в любых условиях, то для работы import(`mdi-vue/${this.name}`) собирается вообще всё, что лежит в папке mdi-vue/.

Вы не может создать компонент "который будет подключать иконки за вас", потому чтобы иконка была подключена, она должна иметься в наличии. Чтобы она имелась в наличии на этапе исполнения, она должна быть собрана на этапе компиляции. Учитывая что заранее (из кода) неизвестно какая именно иконка вам понадобится на этапе исполнения, собраны на этапе компиляции вынуждены быть все иконки что есть.

Если у вас используется ограниченный набор иконок, то вам придётся в любом случае прописать импорт каждой вручную. Это можно оптимизировать написав собственный генератор, который на этапе сборки(или перед ним) пройдётся по файлам и соберёт использованные иконки и выплюнет их в файл с соответствующими импортами. Но проще импортировать что надо, там где надо.