Как я уменьшил размер пакета Webpack на 1000%
или как составить идеальную диету для вашего веб-приложения.
Сначала я подумал, что я преувеличиваю цифры, забрасывая случайные проценты в воздух. но потом я повторил это снова, и цифры определенно неуместны.
Веб-разработка стала прекрасным занятием. никакой навязчивой разметки и никакого ручного префикса CSS. это эпоха инструментов и утилит.
Так в чем же плохая сторона веб-разработки? какие уродливые края? а что мы найдем скрытым под ковром?
вкратце:
- зависимости
- devDependencies
- толстые пакеты
Хорошее, плохое и безобразное
Я не думаю, что мне следует объяснять, что не так хорошо в зависимостях в целом.
но я хочу поговорить об очень конкретном побочном эффекте этих зависимостей - том факте, что многие из них в настоящее время ВНУТРИ наших пакетов, поэтому они влияют на размер пакета.
мы не говорим здесь о DEV-OPS, это совершенно другая проблема (если у вас меньше 50 КБ файлов в ваших node_modules, позвоните мне).
мы говорим о требовать быть нашим новым тихим застенчивым другом, который делает все, что мы от него требуем, независимо от того, что его клиентская сторона, с которой мы имеем дело, здесь.
Здесь нет никаких новостей - просто возможность посмотрите, где мы тоже нарисованы.
Что за хак ... давай поговорим о цифрах
Поработав над своим веб-приложением, я добрался до места, где все складывалось в сторону полноты, поэтому я подумал, какого черта ... давайте представим, что завтра утром оно будет развернуто, и мой красивый (но уродливый) код будет протестирован в самой большой в мире тестовой среде - производственной (например, там).
Я был весьма удивлен, увидев, что мой объединенный в один файл код весил не менее 250 КБ GZIP (!!). люди говорят мне, что я печатаю быстро - но примерно 700 КБ минифицированного Javascript кажутся немного ошеломляющими даже для меня.
Итак, я глубоко изучил свои зависимости и обнаружил, что на самом деле мой код составляет только 20%.
И что….
Люди упорно трудились, чтобы избавить меня от некоторых нажатий на клавиши и позволить мне сосредоточиться на моей реальной логике, а не на периферийных устройствах.
Разве это не так, как предполагается?
Что ж, загрузка 250 КБ данных в некотором смысле приемлема, но разбор 700 КБ несжатого минифицированного Javascript потребует намного больше, чем вы ожидали.
загрузка скрипта на обычном настольном ПК привела к тому, что вкладка полностью зависла на 3 секунды не давая нормально анимировать даже загрузчик. только загрузка файла - даже не начало моей реальной логики.
На мобильных все выглядело еще хуже - 8–12 секунд полностью замороженной страницы, не говоря уже о времени загрузки по мобильной сети.
Прыгая вперед во времени
Я глубоко вздохнул и прочитал сотни и даже тысячи строк кода, которые фактически были частью моего приложения.
После некоторого времени моей самой большой мыслью было:
Какого черта они используют ТАК МНОГО КОДА для реализации таких простых идей?
Меня утомило
Поскольку мой папа всегда учил меня быть «деятелем», а не «болтуном», я просмотрел основные модули, из которых было создано мое приложение, и начал заменять их моими собственными упрощенными версиями, чтобы увидеть, оправдано ли мое чувство, или, может быть, они были все необходимые.
Прежде чем пытаться заменить React, я узнал о замечательном Preact от Джейсона Миллера, который заменяет React по цене 3kb gzip, здесь не нужно работать.
Через неделю я не мог поверить в то, что увидел. У меня была клонированная версия каждого основного модуля, который я использовал - React, React-dom, Redux, React-router, Redux-react, Reselect, html5 routing и другие.
Все они выполняли не менее 70–80% того, что предлагал оригинальный модуль, и, очевидно, на 100% того, что мне было нужно.
Я упаковал все это в модуль-оболочку, который действовал как большинство упомянутых выше модулей с точки зрения экспорта и методов. и мало ли вы знаете, весит удивительный gzip 15 КБ.
Ради обслуживания и распространения я решил опубликовать его для использования такими сердитыми, как я.
Введите: Триксион
Созданный мной модуль называется trixion, и это единственный внешний модуль - Preact.
При создании Trixion я создал сравнительную таблицу, которая показывает различия между несколькими шаблонными проектами:
Project | stargazers | minified | min+gzip react-redux-universal-hot-example| 5713 | 561.3kb | 170.3kb react-redux-starter-kit | 3864 | 103.8kb | 38.9kb react-slingshot | 3262 | 210.4kb | 59.3kb react-isomorphic-starterkit | 1874 | 229.4kb | 66.8kb 28kb-react-redux-routing | 249 | 88kb | 25.9kb trixion | - | 56.8kb | 15kb
Для облегчения запуска я создал trixion-starter, который позволяет мне сразу же начать писать код, не тратя время на разработку или что-то около того.
С тех пор я начал еще около 3 проектов и очень доволен - хотя время сделало меня немного пессимистичным, я начинаю чувствовать, что можно писать современные веб-приложения с минимальной реализацией!
Почему вы этим делитесь?
Для меня trixion - мой новый тихий друг - он делает все, что мне нужно, но не отличается компактностью. это позволяет мне писать интерфейс на основе компонентов со всеми блестящими последними соглашениями без ущерба для размера. другие популярные пакеты созданы для поддержки бесконечного количества вариантов использования, в то время как во многих случаях ваш случай совсем несложный, а ненужный код остается мертвым в вашем пакете.
Суть здесь не в том, чтобы использовать триксион - совсем нет.
Здесь говорится, что вы должны схватить приложение обеими руками и начать изучать, что внутри. будьте внимательны к размеру ваших зависимостей. знайте, что люди делают удивительные (бережливые) вещи, и мы должны их поощрять. Если вы решите использовать триксион, вы наверняка сделаете меня счастливым человеком.
Это та часть, где я хвастаюсь и пытаюсь впечатлить вас своими достижениями. поэтому в следующий раз, когда вы запустите npm run build или webpack или около того, знайте, что есть кто-то, у кого не меньше кода, чем у вас, но его пакет не превышает ~ 24 КБ gzip.
