Как загружать только нужные стили?

Question

[kr_ilya]

Не знаю, какие теги выбрать, если что модеры поправьте ))

Делаю ssr приложение на nuxt.js (vue.js) и столкнулся с такой проблемой, что в исходный код страницы попадают абсолютно все стили (не учитываю тех, что в компонентах). Это всякие vuetify, mdi-icons и другие. Всего получается 22к строк, что не есть хорошо.
Можно ли как то не загружать весь файл стилей, а только нужные. (не нужны же мне все иконки, а только пару штук). Есть ли плагины, которые так делают? Или в конфиге webpack или nuxt.js нужно что-то прописать? Как решить проблему?

Comments

[Одиночка Айс]

Выделить нужные стили в отдельный файл, не?

[kr_ilya]

Одиночка Айс, забыл дописать по поводу этого. Это очень муторно получается, проще найти готовое решение, которое само это сделает.

Answer 1

[Антон Антон]

Для js нужно использовать возможности tree shaking от вебпака, читать тут: https://vuetifyjs.com/en/framework/a-la-carte и в других подобных разделах по используемым либам.
Для css вырезать лишние стили можно с помощью https://www.purgecss.com/ но там тоже есть нюансы, например https://medium.com/@kyis/vue-tailwind-purgecss-the... для tailwind + vue, в общем, нужно тестить и проверять экстракторы