Bootstrap + BootstrapVue. How to optimize?

Question

JavaScript

We seem to be getting rid of jQuery and should end up with a smaller .js file, but I end up with an even bigger one. It's the same with .css because you need to include styles from BootstrapVue as well. What advice would be about this?
In hopes of optimization, I include individual BootstrapVue components in my components. Can you tell me how correct this approach is? Will it affect the optimization if you include BootstrapVue components globally in the main app.js file, and if so, in which direction?
Some BootstrapVue components do not require js. That is, such components simply generate certain <\div> and nothing more. Doing it by hand without using a component will it affect the optimization or will Vue end up rendering either one the same way?
I would be very grateful if you add your own optimization tips. Most of the site will be viewed on older mobile devices, so any advice would be helpful. Thanks in advance.

Answer 1

Subdivide webpack-bundle-analyzer and see what takes up the most space for you, and then look for ways to compress the largest libraries. Sometimes you use 10% of a library and pull it all up. As a result of the work of the analyzer, you will get something like this:
And here you can read how to optimize the application pointwise: How to Reduce Your Vue.JS Bundle Size With Webpack