Vue — вес проекта?

Question

[suffering_frontender]

Здравствуйте.
Сделал небольшое приложение на vue с минимум функционала(вывод графика, таблицы по websocket в реалтайм), подключил несколько плагинов/библиотек:
- vuetify
- highchart
- font-awesome
- moment-timezone
- vue-moment
- moment-timezone
- vue-native-websocket
Все они нужны, ибо решают конкретные задачи)
Проект после сборки с флагом prodaction, весит аж 3mb, хотя функционала минимум, даже сайты столько не весят.
Сделал минификацию через webpack, вес уменьшился на 200kb.
На форумах пишут про асинхронные компоненты и т.п., это все понятно, но они веса не уменьшат, просто будет куча отдельных маленьких файлов, с общим весом 3mb.
Вообщем подскажите неопытному, как правильно делать сборку и подключать зависимости, чтобы для отображения нескольких иконок например, не приходилось тянуть весь font-awesome или как для вывода красивого графика через highchart, не приходилось тянуть всю либу, ибо она огромная?

Comments

[Владимир Коротенко]

Я если честно забил. Для проформы поверяю размерность бандлов, но без фанатизма. Fa кстати позволяет встраивать как svg

[Антон Иванов]

Это шутка что-ли? Ну вот возьмите даже прям эту страницу хабра и сохраните ее - 1.7МБ. А на на ней кроме текста то особо ничего и нет.

Это я к тому - что 3МБ для веб-приложений это сущие пустяки.

[suffering_frontender]

Антон, Просто на форумах пишут о мистических 300-500kb, а у меня 3mb, при том, что есть только 2 таблицы и график. Вот я уже 3-й день, в поисках волшебной статьи, с объяснением почему так)

[Михаил]

suffering_frontender,

только 2 таблицы и график

- vuetify
- highchart
- font-awesome
- moment-timezone
- vue-moment
- moment-timezone
- vue-native-websocket

хмммммммммм ,в чём же дело

[suffering_frontender]

Владимир Коротенко, Не совсем вас понял) Можно подробнее?

[Антон Иванов]

suffering_frontender, Ну вы же сами написали, что в прод-режиме у вас 200 КБ. Так и надо делать. Минификация на проде обязательна.

[Антон Иванов]

suffering_frontender, И да, ваши 2 таблицы и график занимают 2-5КБ из ваших 200 - все остальное это ядро фреймворка.

[suffering_frontender]

Михаил, 1) Красивые стили и готовые решения для модалок и прочих прелестей.
2) Графики на любой вкус
3) Иконки
4) Работа с датами и часовыми поясами
5) Готовая обертка для сокетов
Как бы вы решали данные задачи, все делали бы сами? или это не упрек, а просто констатация факта?)

[its2easyy]

почти везде есть возможность подключать отдельные части библиотек, и об это написано в документации, например https://github.com/FortAwesome/vue-fontawesome#tre... или https://vuetifyjs.com/en/customization/a-la-carte/. Momentjs может тянуть лишние локализации и их можно попробовать отключить. Если стили не экспортируются в файл, то они тоже внутри бандла лежат.

[suffering_frontender]

Антон, В прод режиме на 200kb меньше, но все равно остается много

[Владимир Коротенко]

suffering_frontender, поподробней посмотрите в гите, fiasserver . Там есть ужастик фонт авесома, булма и так по мелочам

Answer 1

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

Попробуй вот такую штуку: https://habr.com/ru/company/jugru/blog/342842/
Для того же moment есть приемы, которые исключат ненужные локали из сборки.
fa - прям у них на сайте инструкция для vue: https://www.npmjs.com/package/@fortawesome/vue-fon...
Опять же, можно заgzipить и получить размер раз в десять меньше.

Судя по картинке из комментария. нужно взять https://github.com/vuetifyjs/vuetify-loader
а также добавить new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/) в конфигурацию вебпака, чтобы отрезать локали moment.
с highcharts, moment-timezone и popup надо гуглить, скорее всего тоже можно срезать.

Answer 2

[Евгений]

Эти 3мб гзипом ужмутся раз в 5-10.
А вообще там половина веса это highchart.
Я такие жирные либы через cdn подрубаю, не мешаю в бандл, смысла в этом нет.

Comments

[Kovalsky]

А это уже гзип походу

[Игорь Воротнёв]

Я такие жирные либы через cdn подрубаю, не мешаю в бандл, смысла в этом нет.

Лол. Вопрос у автора же не в том, чтобы из самого бандла выбросить, а в том, чтобы уменьшить вес сборки в целом. Подключая из CDN вы не только не решаете проблему, но и создаете дополнительную - внешний коннект (DNS resolution time + SSL handshake + request + wait + content download), который в итоге еще и блокирующим будет скорее всего.

[Евгений]

Игорь Воротнёв, вот что загрузится быстрее, несколько либ ПАРАЛЛЕЛЬНО с cdn (причем есть шанс что часть в кеше даже будет), или несколько либ обернутых вебпаком в один офигенный файл типа vendors?

[Игорь Воротнёв]

Евгений, В большинстве случаев - второе. Потому что:
1. установка соединения (DNS, SSL, connect + wait) - самая дорогостоящая операция. Для CDN нужно установить это соединение сначала, для локального бандла - отнимаем все это время, соединение уже активно.
2. скорость передачи данных по сети использует механизм congestion control, при котором скачивание начинается с минимальной скорости (передача небольших пакетов по TCP) которая по мере успешной передачи пакетов растет. Скачивание с CDN начнется медленно и начнет раскачиваться, а с родного сервера - канал к этому моменту уже раскачан и выкачается эта же порция данных значительно быстрее
3. если родной сервер поддерживает HTTP/2 то эти данные прилетят еще быстрее, вообще не стоит париться об этом. То что вы называете "ПАРАЛЛЕЛЬНО с cdn" - не совсем так (см. 1 и 2), в то же время по HTTP/2 с одного сервера - вот это трушный ПАПАЛЛЕЛЬНО, по одному коннекту с раскачанной скорость передачи данных, параллельными потоками (мультиплексирование).
4. запрос на внешний js может еще быть блокирующим (и повесит все остальное пока не скачается и не распарсится), часть локального бандла - не может.