tgoop.com/super_oleg_dev/56
Last Update:
Привет!
В последнее время много занимались проблемой качественного tree-shaking кода библиотек, которые участвуют в сборке tramvai приложений.
Нашли в пакетах tramvai репозитория много проблемных кейсов, которые не позволяют terser вырезать не используемый код - декораторы после транспиляции, статические свойства у функций, использование функций из сторонних пакетов (любой compose, createToken и вызовы других методов будут для terser потенциальным side-effect).
Частные случаи таких проблем можно решить, например с помощью комментария /* @__PURE__ */, но это либо ручная работа, либо магия babel плагинов.
Мой коллега нашел удачное и общее решение проблемы tree-shaking в рамках трамвай репозитория - переложить больше работы на плечи webpack.
Раньше, трамвайные пакеты собирались в один файл, и для терсера доходил практически весь код пакетов, который он оптимизировал по своим возможностям.
Теперь, доработав нашу утилиту @tramvai/build мы собираем трамвайные пакеты с сохранением их структуры, по типу транспиляции через tsc.
Благодаря этому, вебпак может не включать в граф модулей не используемые файлы, что автоматически предотвращает попадание этого кода в бандл, даже если терсер бы не смог его вырезать.
В итоге получился такой набор рекомендаций для создания библиотек, хорошо поддающихся оптимизациям:
- Не используйте декораторы
- Не используйте статические свойства для react компонентов
- Делайте отдельную сборку с ES modules
- Разделяйте логику в пакетах по небольшим модулям
- Сохраняйте файловую структуру этих пакетов при сборке
- Добавляйте в package.json поле "sideEffects": false (или указывайте массив файлов, которые нельзя вырезать - "sideEffects": ["some-global.css"])
- Транспилируйте исходники в ES2019 код для ES modules и браузерной сборок (немного мотивации в статье по ссылке)
- Обязательно проверяйте tree-shaking ваших пакетов на дефолтной webpack production сборке, добавляйте комментарий /* @__PURE__ */ при необходимости
Утилита @tramvai/build из коробки дает вам сборку CJS и ES модулей, modern JS код, сохранение файловой структуры, поддержку отдельной browser сборки, и рекомендуется для наших внутренних команд для сборки любых пакетов, используемых SSR приложениями.
Кстати, референсом для @tramvai/build была отличная тулза microbundle
Большую часть этих советов можно найти в статьях:
- Гайд по tree-shaking в Webpack документации
- Статья "How To Make Tree Shakeable Libraries"
BY SuperOleg dev notes
Share with your friend now:
tgoop.com/super_oleg_dev/56