Содержание

· 1. Мониторинг: Первый столп
· 2. Популярные советы по оптимизации
∘ 1.Используйте загрузчик:
∘ 2.Tree Shake
∘ 3.Распараллеливание ⛓️
∘ 4.Разбиение кода
∘ 5. Кэш: кэш-загрузчик WP4 или постоянное кэширование WP5

Здравствуйте, ребята, держу пари, вы видели много советов и приемов разработчиков, которые заставят вас писать более эффективный код, более быстрый код и так далее. Но, в конце концов, вы все равно должны это проверить, верно? Вы держите пари! И для этого вам нужно построить его, а оттуда вы можете перейти к производству, разработке и т. Д. Однако, если вы не хотите ждать мема «одна вечность спустя», вам нужно убедиться, что он строится быстро! . Я пропущу что такое веб-пакет (объединение JavaScript) и помогу вам его оптимизировать. Но подождите… В заголовке что-то упоминается о деньгах. Хорошо, хорошо, я пропущу эти гуру маркетинга и дам вам формулу:

Сокращение времени сборки ➡ вы быстрее тестируете, чтобы увидеть, работает ли это, а конвейеры работают меньше времени ➡ вы получаете больше времени на разработку и используете меньше ресурсов ↔️ вы экономите деньги.

Я дам вам общие советы, чтобы убедиться, что это останется для вас актуальным, независимо от того, какую версию веб-пакета вы используете, но мне нравится структурированный контент, поэтому я начну с двух категорий: Мониторинг и оптимизациясоветы.

1. Мониторинг: первый столп

«Первая опора» довольно драматично, я знаю. Но поверьте мне, на этот раз вы не хотите тратить 3 или 4 утра на догадки и ходить вокруг да около, что приводит к неудаче. Неважно, настроен ли веб-пакет или вы только что добавили:

Webpack-bundle-analyzer и Webpack-speed-measure — ваши лучшие друзья. Если вы читаете это, когда Webpack 10 актуален, найдите несколько плагинов метрик и постарайтесь получить как можно больше информации, чтобы знать, что оптимизировать.

2. Популярные советы по оптимизации

Отлично, теперь, когда мы знаем, как измерять производительность, давайте удостоверимся, что у нас есть еще одна хорошая практика:

Файл конфигурации!! Это может показаться безумно простым, но если я чему-то научился за свою карьеру, то ожидать чего угодно. Файл конфигурации поможет вам централизовать все, теперь приступим к списку:

1.Используйте загрузчик:

Загрузчики — это модули, которые позволяют предварительно обрабатывать и преобразовывать файлы разных типов перед их добавлением в бандл: это могут быть транспиляторы TypeScript/JavaScript, загрузчики стилей/CSS. Большинство этих загрузчиков также минимизируют код.

⚠️Внимание: не используйте два загрузчика для одной и той же задачи: например, EsBuild Loader и Babel. Это предупреждение даже в документации:

2. Встряхивание дерева

Встряхивание дерева в основном удалит мертвый код из вашего выходного пакета, сделав все меньше и быстрее (отметьте использованные свойства экспорта, но также побочные эффекты ⚠️).

3.Распараллеливание ⛓️

Один из моих любимых миров: Parallelize!!! Это удивительно, потому что много раз вы будете работать на многоядерных процессорах, а это означает мощность! Много энергии, которую можно использовать для более быстрой сборки, поскольку мы можем делегировать определенные загрузчики, выполнение которых занимает слишком много времени, в другой поток, хорошим примером является загрузчик потоков, возможно, в будущем мы углубимся в это.

4. Разделение кода

Уменьшите размер пакета ➡ уменьшите нагрузку. Я уверен, что вы помните плагин bundle-analyzer, после его запуска появится огромный детальный блок данных, так что пришло время его оптимизировать: мы можем использовать SplitChunksPlugin, чтобы разбить код на отдельные файлы на основе общих зависимостей. и другие критерии. Вот пример:

splitChunks: {
 chunks: 'all',
 name: false,
}

chunks: ‘all’: это указывает веб-пакету разделить код, который является общим для разных точек входа (т. е. модулей, которые используются несколькими страницами), в отдельный файл. Значение all указывает, что это относится как к синхронным, так и к асинхронным фрагментам.

имя: false: этот параметр отключает присвоение имен разделяемым фрагментам. Если установлено значение false, веб-пакет генерирует уникальные имена для разделенных фрагментов на основе их содержимого.

Пока все отлично, но мы можем сделать еще один шаг и добавить cacheGroups, что позволит вам группировать несколько фрагментов в один кешируемый модуль:

splitChunks: {
  chunks: 'all',
  name: false,
  cacheGroups: {
   vendor: {
     test: /[\\/]node_modules[\\/]/,
     name: 'vendors',
     enforce: true
    }
  }
 }

В данном случае конфигурация определяет группу кеша с именемvendors, которая соответствует любым модулям из каталога node_modules. Когда модуль соответствует этому тесту, он будет добавлен в отдельный фрагмент с именем vendors, содержащий все модули из node_modules. Это может повысить производительность за счет отделения сторонних библиотек от кода приложения и разрешения браузеру кэшировать их отдельно.
Параметр enforce: true гарантирует, что группа кеша всегда будет использоваться, даже если это приведет к уменьшению фрагментов. Это гарантирует, что vendorsчанк всегда будет генерироваться, даже если в нем всего несколько модулей.
В целом, эта конфигурация может еще больше оптимизировать разбиение кода на отдельные файлы за счет группировки модулей из каталога node_modules в отдельный блок, который можно кэшировать отдельно, что повышает производительность и сокращает избыточный код.

5. Кэш: кеш-загрузчик WP4 или постоянное кеширование WP5

Независимо от версии вы всегда должны искать возможности кэширования, потому что вы можете значительно увеличить время сборки, сохраняя выходные данные предыдущих сборок и повторно используя их для будущих. Это сводит к минимуму необходимость перекомпилировать файлы, которые не были изменены, что в конечном итоге приводит к ускорению времени сборки и повышению эффективности процесса разработки.
Механизм кэширования сохраняет скомпилированные выходные данные загрузчика и извлекает их из кэша для последующих сборок. Это гарантирует, что Webpack не придется многократно перекомпилировать один и тот же код, что может значительно замедлить процесс сборки.

⚠️ Возможно, вы захотите отключить любой тип кэширования, когда готовите сборку к производству !! Береженого Бог бережет.

Спасибо за прочтение, если понравилось, помогите не потерять мотивацию :

  1. Аплодисменты👏 (аплодисменты Гаги песня у меня в голове)
  2. 2.Подпишитесь и подпишитесь 🐾
  3. 3. Распространите информацию или расскажите другу, который не умеет хранить секреты