Vue - project weight?

Question

webpack

Hello.
I made a small application on vue with a minimum of functionality (output graphs, tables via websocket in real time), connected several plugins / libraries:
- vuetify
- highchart
- font-awesome
- moment-timezone
- vue-moment
- moment-timezone
- vue-native- websocket
All of them are needed, because they solve specific problems)
The project after assembly with the prodaction flag weighs as much as 3mb, although the functionality is minimal, even sites do not weigh that much.
I made minification through webpack, the weight decreased by 200kb.
On the forums they write about asynchronous components, etc., this is all clear, but they will not reduce the weight, there will simply be a bunch of separate small files, with a total weight of 3mb.
In general, tell the inexperienced how to properly assemble and connect dependencies so that, for example, to display several icons, for example, you don’t have to pull the entire font-awesome or how to display a beautiful graph through highchart, you don’t have to pull the entire lib, because it is huge?

Answer 1

Try this thing: https://habr.com/ru/company/jugru/blog/342842/
For the same moment, there are tricks that will exclude unnecessary locales from the build.
fa - instructions for vue are directly on their website: https://www.npmjs.com/package/@fortawesome/vue-fon...
Again, you can use gzip to get the size ten times smaller.
Judging by the picture from the comment. need to take https://github.com/vuetifyjs/vuetify-loader
and add new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/) to webpack config to cut off moment.
with highcharts, moment-timezone and popup you need to google, most likely you can also cut it.

Answer 2

These 3mb gzip will shrink every 5-10 times.
In general, half of the weight is highchart.
I cut such fat libs through cdn, I don’t interfere with the bundle, there’s no point in this.