Возможно, вам не нужен Svelte, чтобы уменьшить ваш JavaScript

Я автор статьи "Хороший ли выбор Svelte для реализации виджета?".

1. В этой статье, автор говорит про пакеты, но не упоминает query-string, который в виджете также используется. Можно его тоже выкинуть и парсить строку вручную (-2кб). И Axios/Svelte/«Все, что используется для ускорения разработки» — выбросить, оно тоже место занимает.

2. Использовать sentry в cdn? Какая вероятность, что у пользователя будет закеширована версия sentry, которая используется в виджете? Какая вероятность, что origin cdn в виджете и origin cdn на других страницах интернета, будет один и тот же? Я думаю, чуть больше, чем sentry, встроенный в виджет, но не сильно.

Тут еще можно добавить, к sentry в бандле можно применить tree-shaking, а к sentry в cdn — нельзя. Если говорить про виджет, sentry там занимает 12.5 кб.

3.

сократить бандл на 20%, сбросив 14 Кб из общего размера виджета.

Тут явно видно, что не является модулем, который можно оптимизировать. Надеюсь, больше не кажется, что можно убрать 14кб.

Итого: можно сократить 10 кб на картинках, но не 46 кб.

Хороший ли выбор Svelte для реализации виджета?

Бандл весит столько, из-за библиотек/изображений от которых я не смог отказаться. Например, sentry.

Использовал бы я реакт, было бы все то же самое, только еще:
1. 42 Кб сходу
2. Большое кол-во бойлерплейта в коде (+ меньше скорость разработки)

Без mobx/redux/effector также уменьшится скорость разработки.

Хороший ли выбор Svelte для реализации виджета?

Все то, что вы сэкономили, не подключая, например, vue, — вернется вам в виде сгенеренного кода. Просто в vue этот код УЖЕ включен, а тут он генерится на лету

Не так. Тот код, который сгенерировал компилятор Svelte, во Vue постоянно считается в runtime. Svelte, заранее знает все состояния и не будет тратить каждый раз время на рассчитывание каких-либо изменений. (No virtual DOM)

Тот код который включен в Vue это вещи, без которых он не сможет работать в runtime, в Svelte размер этого кода 1.4кб.

Тот факт, что svelte компилируемый, кстати, дает ему возможность, не писать тонны кода как в React с useCallback, useMemo, useEffect, которые потом превращаются в сложные Proxy и также влияют на производительность. Да и в принципе относительно других фреймворков, будет значительно меньше кода, из-за этого. (Write less code)

Хороший ли выбор Svelte для реализации виджета?

Не проще. Если бы писалось на ванильном JS, то время тратилось на вещи, которые в фреймворках есть уже из коробки. Создавать с нуля их, зачем, если есть готовые решения? Например, обновлять DOM, если состояние компонента зависело от какой-то переменной, которая изменилась и не обновлять, если не изменилась.
Если говорить про Svelte, то он практически ничего не весит в runtime, потому что все свои работы делает на этапе компиляции и код в бандле получается, практически такой же, как если бы писался на ванильном js, да и пишется практически как ванильный.

К слову, вот пример с формой телефона, который я подсмотрел у AlexxNB, тут явно виден ванильный js.

  function formatByPattern(node, pattern) {
    const setCursor = () => {
      const match = node.value.substr(2).match(/[\d]/gi);
      const pos = match ? node.value.lastIndexOf(match.pop()) + 1 : 3;
      node.setSelectionRange(pos, pos);
    };

    const formatValue = e => {
      let digits = node.value
        .substr(3)
        .replace(/[^\d]/g, '')
        .split('');
      node.value = pattern.replace(/[*]/g, m => digits.shift() || m);
      setCursor();
    };

    node.addEventListener('input', formatValue);

    return {
      destroy: () => node.removeEventListener('input', formatValue)
    };
  }

<input
    use:formatByPattern={'+7 (***) ***-**-**'}
    type="text"
    bind:value={$phoneNumber}
    placeholder="+7 (***) ***-**-**"
  />

Хороший ли выбор Svelte для реализации виджета?

У меня в вебпак зашит webpack-bundle-analyzer + проверяю пакеты с помощью import-cost. Но тут, безусловно, на уровень CI внедрить, тоже не помешает. Спасибо за идею.

Хороший ли выбор Svelte для реализации виджета?

Спасибо за комментарий!
Нужно всегда отталкиваться от требований. Мне кажется на все Ваши вопросы может ответить видео Ильи Климова. Он там подробно разбирает случаи, когда Svelte может подойти, а когда нет. Очень рекомендую. Оно немножко устарело в замечании с typescript, но большая часть там актуальна.

Хороший ли выбор Svelte для реализации виджета?

Спасибо за комментарий!
Имелось ввиду, сколько станет размер бандла если добавить только пакет(ы) React/Angular/Vue. Именно это показывает bundlephobia. У vue и angular действительно есть tree-shaking о чем у них тоже сказано. Но они все равно не сравнятся со svelte или preact.