#svg #nuxt.js
Вопрос:
В настоящее время я использую пакет NuxtJS/svg и у меня возникли проблемы с динамическим импортом.
Например:
- У меня внутри 10 SVG /активы/изображения
- У меня есть страница index.vue
Случай 1)
Я включаю 1 SVG в исходном виде на странице вот так:
<span v-html="require(`../assets/images/one.svg?raw`)" />
Результат: Все в порядке. Nuxt создает файл фрагмента JS, который включает файл one.svg.
Случай 2)
Проблемный случай. Я включаю тот же SVG, что и raw, но с помощью динамического импорта:
<span v-html="require(`../assets/images/${imageName}.svg?raw`)" />
Имя изображения объявлено в данных и имеет значение «один».
Результат: Nuxt создает файл фрагмента JS, который включает в себя один.svg, а также все остальные 9 SVG!
Почему изображения, на которые нигде нет ссылок, включены в мои фрагменты JS? Я столкнулся с этой проблемой в большом проекте и теперь воссоздал ее с помощью примера приложения. Есть какие-нибудь идеи?
Комментарии:
1. Вероятно, потому, что, когда вы делаете что-то динамичное, webpack понятия не имеет, как узнать, нужно ли вам импортировать определенное изображение или нет. Следовательно, он импортирует все.
2. Да, но для этого должно быть решение/обходной путь?! :-/
3. Я читал о том, как webpack обрабатывает динамический импорт. Я использую другой способ использования своих значков.