How to load only the styles you need?

Question

css

I don’t know which tags to choose, correct them if anything))
I’m making an ssr application on nuxt.js (vue.js) and ran into such a problem that absolutely all styles get into the source code of the page (I don’t take into account those in the components). These are all sorts of vuetify, mdi-icons and others. In total, 22k lines are obtained, which is not good.
Is it possible somehow not to load the entire style file, but only the necessary ones. (I do not need all the icons, but only a couple of pieces). Are there plugins that do this? Or do I need to write something in the webpack or nuxt.js config? How to solve the problem?

Answer 1

For js, you need to use the features of tree shaking from webpack, read here: https://vuetifyjs.com/en/framework/a-la-carte and in other similar sections on the libraries used.
For css, you can cut out unnecessary styles using https://www.purgecss.com/ but there are also nuances there, for example https://medium.com/@kyis/vue-tailwind-purgecss-the... for tailwind + vue , in general, you need to test and check extractors