1 мегабайт js-минимизированного кода от плагина — это нормально для одного плагина?

Question

[Вова Дружаев]

Привет.

Имеется один плагин для вордпресс (принят в официальный репозиторий ВП). Он выводит форму комментариев и комментарии и авторизацию из соцсетей. Rest там и реакт и все современные плюшки фронтендера. После открытия вкладки Сеть, в браузере мой глаз задергался. Я увидел минимизированный js-файл весом чуть более 1 мегабайта.
Вопрос - это в 2018-м нормально? Такой вес пакованного js - который добавляет всего один плагин, всего лишь для комментариев?
У меня на сайте вместе с jquery + всеми js и css вес меньше будет раза в два.

Кто что думает об этом? Или фронтендеры совсем съехали с катушек - пихая кучу либ и давая подобное на выходе?

p.s. о кешировании статики браузером я знаю. Сам факт такого веса. Для справки: jquery 94 килобайта

upd: 2020-11-28 после 2-х лет у автора размер бандла вырос в двое. Вот пруф https://yadi.sk/i/MGqLT47UJ5Pr0Q фронтенд мир чеканулся

Comments

[Arman]

gzip на отдачу статики настроен? в целом видел и по 10мб фронты, пытаются разгрузить, но ... как вариант пробовать загружать такие комменты отдельно и может по запросу юзера

[Вова Дружаев]

Вопрос не в гзипах - а в подходе - закину ка я модные фреймворки все и буду юзать. Что будет если все такой тенденцией пойдут? Не думаю что там такой объем кода нужен. Будем иметь 10 ВП плагинов и каждый свои паки будет тянуть по мегабайту.
И вопрос - это вообще нормальная практика в 2018-м? Или это новый тренд?

[Алексей Ярков]

Ссылку на плагин я вам, конечно же, не дам.
Может там сорсмапы включены в файл?

[Вова Дружаев]

Алексей Ярков, сорян. Если надо вот https://ru.wordpress.org/plugins/anycomment/

[alex]

Владимир Дружаев,

Или фронтендеры совсем съехали с катушек

не стоит судить все сообщество по одному индивидуму и одному плагину версией 0.0.59

P.S. Почему бы вам не задать этот вопрос разработчику этого плагина и не спросить что за дичь (или нет?) он написал? он вполне себе русскоговорящий человек https://github.com/bologer

[Вова Дружаев]

Alex, да конечно https://yadi.sk/i/44wiGFJwnzqSIA
но там в комментариях мне сказали что это фигня и посеяли во мне сомнения. Вот решил спросить сообщество - может я и вправду гоню и это норм

[alex]

Владимир Дружаев, я не шарю ни в php, ни в WP, но лично мое мнение, как фронтендщика, для такого функционала как коментарии, 1мб сжатого кода - это чересчур много

[Danila]

1мб JS это очень много. И дело тут даже не в трафике, а в том, сколько кода браузеру нужно будет распарсить, скомпилировать и выполнить в рантайме. Достаточно глянуть в зависимости проекта, там react, jquery и еще куча лапши.

[alex-1917]

Данила, да, так точно. я вспоминал этот термин. ЛАПША-КОД!

Answer 1

[Антон Спирин]

Для справки: react gzipped - 31.8K.
На ваш вопрос невозможно дать однозначный ответ. Его следовало задавать автору конкретного плагина, а не тут.

Comments

[Вова Дружаев]

ну... все началось что друг поставил этот плаг и порекомендовал. Я глянул. В каментах на его страничке я поднял тему веса js файла. Разработчик тоже увидел тему и подключился в общение. Но толком не дал никаких комментариев, а лишь они на пару, во мне породили сомнения - "может я гоню и так на самом деле норм". В общем разраб сказал это https://yadi.sk/i/44wiGFJwnzqSIA

Я понимаю - файл с сервака отдается сжатым:
1. его браузер должен распаковать. Так файл из 1 мегабайта отдается 300 килобайтным весом.
Но второе - один фиг 1 мегабайт помимо загрузки и распаковки клиенту надо будет отрендерить. т.е. обработать все что там есть. Вот и подумал - дофига это.

т.к. в каментах общалось нас трое и двое сказали что вес - это ерунда. Хочу услышать мнение IT отрасли. Те кто в теме. Вы то наверно в хроме отладчиком умеете пользоваться и снимать метрики - дофига это или нет.

Тема ожирения веба, да и разработки в целом, достаточно часто поднимается в инете. Может это я начал параноить - начитавшись подобного?

[Сергей Горностаев]

Владимир Дружаев,

в каментах общалось нас трое и двое сказали что вес - это ерунда

Есть две хороших книги от авторитетных авторов, в которых такая позиция осуждается - "Release it!" и "Чистый код". Но подавляющее большинство фронтендеров и wordpress-конфигураторов никогда их не читали и читать вряд ли станут.

[Вова Дружаев]

Сергей Горностаев, спасибо. Вторую встречал. Первую возьму на заметку.

[Антон Спирин]

Владимир Дружаев, ну посмотрев исходники скажу, что не понимаю зачем было добавлять в бандл:
1. jquery
2. immutable
3. react-select
4. axios

Без части остальных зависимостей, уверен, тоже можно было бы обойтись.
Да и сам react хорошо бы вынести.

Это, вообще, вызвало крайнее недоумение:

let list = [];
if (editorToolbarOptions.indexOf('ordered') !== -1) {
  list.push({'list': 'ordered'});
}

if (editorToolbarOptions.indexOf('bullet') !== -1) {
  list.push({'list': 'bullet'});
}

if (list) {
  toolbar.push(list);
}


let other = ['link', 'clean'];

other = other.filter((item) => {
  return editorToolbarOptions.indexOf(item) !== -1;
});

if (other) {
  toolbar.push(other);
}

Зачем там проверки, которые всегда возвращают true?)
И подобные проверки:
editorToolbarOptions !== []
всегда будут давать true.
Не используются стрелочные функции для колбеков. Присутствует дублирование кода.

Но все равно, основной вес бандла это зависимотси.

spoiler

Сам код автора: 60кб (10кб гзипнутый).

В сборке присутствует весь lodash, зачем-то post-css, axios и вместе с ним полифилл для fetch.
Думаю, при желании, размер этого плагина можно сократить очень сильно. Особенно если заменить quill чем-нибудь полегче.

[Вова Дружаев]

Антон Спирин, ого. Вот это отличный ответ. Спасибо за график с зависимостями. И jquery и лайтбокс... А зачем они мне повторно?
Пошел гуглить что такое quill.js

p.s. кстати - картинка очень здорово отображает топовую статью на хабре про разочарование в софте. Тут ее в каментах уже дважды вспоминали

[Антон Спирин]

Владимир Дружаев, ну к добавлению зависимостей в проект надо подходить очень осторожно. Особенно, если это плагин.
По логике автора, видимо, нормально если каждый подобный плагин на сайте будет тянуть свою библиотеку для загрузки данных, свой JQuery, react, lodash, необязательный immutable, громоздкие реализации компонентов, большая часть функционала которых не нужна и прочее.
А может он ни о чем подобном никогда и не задумывался. Тогда ему определенно стоит увидеть скрин с картой зависимостей.

Answer 2

[Сергей Горностаев]

Это норма, но это не правильно.

Comments

[Вова Дружаев]

В каменте к ответу Ивана я давал уже эту ссылку.
Но мне нужен ответ матерых программистов - кто именно занимается разработкой и думает о производительности. Их примеры и развернутые ответы о такой массе js - были бы к месту.

[Сергей Горностаев]

Владимир Дружаев, я в web-разработке с 2002-го года. Всякое видел, что такое хорошо и плохо знаю. В последние лет пять-семь на каждом проекте модные творцы пытаются мне подсунуть 15-метровую вёрстку или ещё большего размера фронт. Я каждый раз ору как животное, а иногда даже порываюсь избить того, кто нанял этих засранцев. Но потом успокаиваюсь, потому что других найти почти невозможно. Так что добавить мне в общем-то нечего, по ссылке чистая правда.

[Вова Дружаев]

Блин... нету чтоли туториала как надо делать и как не надо? Помнится в качалке в молодости (да и щас не стар) когда занимался - была книга "Думай" (Стюарт МакРоберт) и потом вышла "Думай 2" - неужто подобного нет для фронтендеров? Там говорилось не о том - что ты качаться как бычара должен - а слушать тело, смотреть вокруг и думать - что ты делаешь и для чего. Анализировать ситуацию.

Я сам и бек и фронт - но не настолько, чтоб был гуру и там и там... Но "какого фига происходит" - задумываюсь я...

[Сергей Горностаев]

Владимир Дружаев, нет, единого мнения по этому вопросу нет, а как следствие и книг. ИТ - молодая отрасль, мы ещё только ищем путь как делать правильно и эффективно.

[stul5tul]

Владимир Дружаев,

Блин... нету чтоли туториала как надо делать и как не надо?

От задачи зависит.
Получив такой огромный фроненд я бы подумал - а нафига весь этот код, что он делает? У меня что, Wrike?

Answer 3

[Иван]

Это wp. И этим все сказано. Посмотрите например темы и плагины на codecanyon. Они типа проверены командой envato, стоят денег, но 1мб по сравнению с ними будет детским лепетом - там часто несколько раз по несколько мб подключают. Или в теме пару раз подключают тот же jquery, но из разных cdn.

Comments

[Вова Дружаев]

Этим не сказано. Отвечайте на вопрос не в стиле это ВП. А в рамках вопроса - 1 мегабайт js минимизированного это норм? Это так и надо? Вы бы так делали?
А аргумент - "ну первый раз мегабайт - второй раз и кеша возьмется" - это нормальный ответ?

[Иван]

А разве это не очевидно? 1мб на плагин, у вас их положим 10. Дальше считайте сами.
По мне это не нормально ну ни разу.

Но на вп ничего иного не видел. Так что для вп это рядовая ситуация.

А вообще прежде чем вопросы задавать научитесь в таком тоне с людьми не общаться. Вам тут никто ничего не должен.

[Вова Дружаев]

Иван, и я вам не должен. Хамить не нужно. Если вам нечего сказать по теме - пройдите мимо. Дело не в ВП, а в тенденции усложнения на пустом месте: https://habr.com/post/423889/

[alex-1917]

это иван и этим все сказано

Answer 4

[Орхан Гасанлы]

Самая тяжелая страница моего сайта на ВП со всеми скриптами весит 1.2 мб. Правда, тема самодельная и плагины минимизироаны и многие плагины заменены на обычные скрипты.
Кстати, вы можете скрипты и стили плагинов сделать deregister на ненужных страницах используя условные теги (is_page() is_singular() и т.д.)
Для того, чтобы найти handle этих плюшек установите плагин Query Monitor

Comments

[Вова Дружаев]

я не ищу способа отключения скриптов. Я их знаю. Я ищу ответ - это нормально - такой вес минимизированного js-файла одного плагина?
Это не общий js-файл всего сайта, а всего лишь отдельный плагин. Ладно еслиб это было приложение (SPA например) и его общий скомпилированный js-файл. Но не один же модуль должен столько весить?

Вот и хочу понять - тренд это или что. Потому как немного слежу за фронтендом - развели там зоопарк из фреймворков и вот что на практике получаем. Если такое идет - значит скоро получим такое поведение везде? И никто не будет задумываться о том что это много и чрезмерно. Все будут думать что это норма.

[Орхан Гасанлы]

Владимир Дружаев, само собой, что это ненормально... Я с вами полностью согласен. В связи с тем, что каждый разработчик подключает свой набор скриптов и они часто могут дублироваться и тем самым увеличивать вес страниц сайта или даже вызывать конфликт.
Ну и конечно же куча фреймворков, скриптов, стилей для тем, которые также в разы увеличивают вес сайта.

Для наглядности посмотрите плагины Visual Composer, Ultimate Addons for VC, Essential Grid и т.д. и увидите кучу скриптов весом более 1мб.

[Вова Дружаев]

пейджбилдеры - это немного другая история. И опять же там скрипты нужны для админки - т.к. из админки вся магия делается. не думаю (правда не смотрел) что там такие объемы js идут на фронт - конечному пользователю.

Может я от мира отстал и увидев подобное депресснул