5 ошибок в Svelte, которые тихо раздувают бандл и ломают логику

5 ошибок в Svelte, которые тихо раздувают бандл и ломают логику

У Svelte есть неприятная особенность: код выглядит компактно, а ошибки в архитектуре прячутся глубже, чем в «толстых» фреймворках. Если не следить за границами компонентов, можно получить лишние подписки, дублирование состояния и тяжёлый hydration без видимых причин.

— Тянуть всё состояние в один файл. В Svelte удобство store легко превращается в свалку: выносите только реально общее, остальное держите локально.
— Считать derived-логику в разметке. Как только выражение начинает ветвиться, переносите его в $: или отдельную функцию.
— Рендерить большие списки без ключей и виртуализации. Даже простой UI начинает тормозить, если DOM обновляется целиком.
— Смешивать SSR-логику с браузерной. Любой доступ к window, localStorage и измерениям — только после проверки окружения.

Ещё одна частая ловушка — подписки внутри компонентов без явного cleanup. В Svelte это особенно коварно: компонент уже исчез, а обработчик продолжает жить и держать память.

Если проект на Svelte начал «тяжелеть», первым делом смотрите не на UI, а на состояние, подписки и места, где шаблон стал мини-движком.