Мы уже некоторое время используем webpack для реагирования, и меня всегда преследовало, насколько медленно он компилирует наш пакет. Мы явно делали что-то не так.
Для меня Webpack и Babel творили какую-то черную магию, которую я не понимал, пока не начал присматриваться.
Как только я это сделал, мне удалось сократить время сборки в 30 раз!
от ~15 минут до менее чем ~30 секунд! 😱
Я не фронтенд-эксперт, но мне потребовалось несколько дней, чтобы освежить наш опыт разработки. Ты тоже можешь это сделать. Это просто.
Вот что я сделал.
📦 Всегда используйте CDN там, где это возможно
Размер пакета можно уменьшить с нескольких мегабайт до нескольких сотен килобайт. Вы можете сделать это вручную или использовать webpack-plugin.
Для нас это были Bulma & Material Design Icons. Вы даже можете использовать реагирование cdn, все еще используя jsx.
🐷 Замените толстые пакеты на более тонкие
Используйте webpack-bundle-analyzer, чтобы найти, кто вас тормозит. Например, мы заменили moment.js на dayjs. Вы также можете использовать date-fns.
📜 Удалите неиспользуемый код и пакеты
Встряхивание дерева Webpack — это здорово, но это не серебряная пуля. Просто перестаньте использовать комментарии для контроля версий и удалите старый закомментированный код, который у вас есть, и пусть история git сделает свою работу. Например, у нас в проекте был установлен и настроен redux-thunk, он стоит уже больше года и им никто никогда не пользовался.
🌓 Не используйте 2 пакета, которые делают одно и то же
Ну, это очевидно, но почему-то у нас в проекте были реакт-даты и реакт-датпикер. Если ваш проект большой, я бы рассмотрел возможность сканирования вашего package.json, чтобы найти их, что я и сделал.
🔍 Дважды проверьте свой импорт
Почти всегда воздержитесь от использования Import * from "fat-package". Существует высокая вероятность того, что вы импортируете вещи, которые вам не нужны/не нужны.
Кроме того, в некоторых пакетах есть некоторые ошибки. Например, чтобы правильно импортировать конкретный сборщик из react-color, вместо того, чтобы импортировать его вот так Import { HuePicker } from "react-color", где мы должны были импортировать его вот так: Import HuePicker from "react-color/lib/components/hue/Hue".
🔁 Автоматическая пересборка после установки нового пакета
Вместо того, чтобы тратить несколько секунд на перезапуск вебпака самостоятельно, используйте watch-missing-node-modules-plugin.
✂️ Чанкинг
Hemal Patel проделал потрясающую работу, объяснив это в Webpack 4 — Mysterious SplitChunks Plugin.
Я не эксперт в инструментах внешнего интерфейса, но то, что я сделал, определенно работает для меня, и я надеюсь, что это поможет и вам.
Пожалуйста, оставьте комментарий, скажите мне, какой трюк произвел на вас наибольшее впечатление.
Понравилась история? Не забудьте оставить немного 👏👏👏👏👏 здесь и поделиться этой историей со своими друзьями, страдающими от вебпака. Кроме того, следите за мной в Твиттере, чтобы быть в курсе обновлений интерфейса и дизайна (я пишу на английском и арабском языках): https://twitter.com/cdes
Ахмад Аль Хаддад является руководителем отдела дизайна и прототипирования продукции в Tam Hub, многопрофильном дизайнере/разработчике из Саудовской Аравии.
