Вы искали, как трясти дерево с помощью Parcel, и не нашли. Это быстро и просто. Время от времени мы запускаем какой-нибудь проект и начинаем импортировать библиотеки. Проект начинает расти все больше и больше, и затем мы смотрим, насколько велик наш пакет, и он огромен. Мы же не хотим объединять код, который не используем, верно? Давайте посмотрим, как мы можем это исправить.
TL;DR
Начиная с parcel v1.9.0 используйте параметр cli --experimental-scope-hoisting
parcel build index.html -d build --experimental-scope-hoisting
Лодаш
Хотя вам вообще не нужен lodash, в lodash есть все те удобные служебные функции, которые мы все любим. Вам может понадобиться только debounce или groupBy или пересечение или ‹добавить здесь свою функцию›, и вы не хотите все.
Итак, это простой код, просто чтобы показать вам, как он работает:
Для наглядности использую parcel plugin.
Теперь, если мы реорганизуем код следующим образом:
Он уменьшается: 92,2 КБ → 15,41 КБ, размер на 83,28% меньше бесплатно 😎⚡️🎉
Сеть Lodash
Но мы хотим написать код функционального стиля и выполнить некоторые преобразования массивов или объектов. Неужели нам действительно нужно все импортировать?
Приложив немного магии и настраиваемую функцию цепочки, мы можем встряхнуть дерево.
Я бы не рекомендовал это, потому что это взлом, но он работает 😀
92,2 КБ → 17,86 КБ, размер на 80,06% меньше, но все же это взлом.
Будущее цепочки Lodash близко
Что, если бы я сказал вам, что нам не нужен взлом lodash и не нужен lodash / fp. Нам не нужен поток lodash или аналогичные методы конвейера.
Что, если мы можем использовать собственный js для создания цепочечных преобразований.
Есть предложение оператора конвейера, и когда пакет включить babel 7 станет На самом деле, до тех пор мы можем использовать babel 6 обходной путь оператора конвейера.
Посмотрите, как красиво выглядит код: 92,2 КБ → 16,87 КБ потрясающий.
Бонус (rxjs v6)
Я должен упомянуть rxjs, нет необходимости в новом посте только для rx.
У меня отношения любви-ненависти с rxjs, потому что это библиотека с прекрасными функциями. Но я просто не хочу добавлять 200 КБ минифицированного кода в свое приложение или добавлять его как внешнюю зависимость.
Так что давайте дерево встряхнем, потому что мы можем 😎
214,84 КБ → 11,45 КБ, размер на 94,67% меньше бесплатно ️🎉
Заключение
Сборщик Parcel js все еще находится в разработке, поэтому он еще не прошел боевых испытаний. В нем все еще отсутствуют некоторые функции, но это отличный инструмент. С функцией встряхивания дерева это отличный инструмент, попробуйте. Встряхивание дерева с помощью --experimental-scope-hoisting.
Сохраняйте спокойствие и встряхивайте эти приложения!