Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 <p>10 октября вышел webpack 5. Новая версия включает архитектурные улучшения и критичные изменения. Работа над новой версией продолжается, поэтому при обновлении можно столкнуться с проблемами и багами. Тем не менее обновиться до пятой версии и оценить её преимущества можно уже сегодня.</p>

2 <h2>Содержание</h2>

3 <ul><li><a>На чём сфокусирован релиз webpack 5</a></li>

4 <li><a>Основные изменения</a></li>

5 </ul><h2>На чём сфокусирован релиз webpack 5</h2>

6 <p>При разработке новой версии команда webpack сфокусировалась на следующем:</p>

7 <ul><li>Повышение скорости сборки благодаря Persistent Cashing</li>

8 <li>Улучшение долгосрочного кэширования</li>

9 <li>Оптимизация размеров бандлов с помощью Tree Shaking</li>

10 <li>Улучшение совместимости с веб-платформами</li>

11 <li>Очистка внутренних структур, которые оставались в подвешенном положении с момента внедрения тех или иных фич в четвёртой версии</li>

12 <li>Подготовка к появлению новых фич - для этого сейчас выполнены критичные обновления. Это позволит в будущем использовать webpack 5 как можно дольше</li>

13 </ul><h2>Основные изменения</h2>

14 <p>Команда webpack в числе основных изменений в пятой версии называет удаление элементов, отмеченных как устаревшие в четвёртой версии. Также появились новые устаревшие элементы. Например, при использовании require.include, который стал устаревшим, webpack по умолчанию будет показывать предупреждение.</p>

15 <p>В новой версии удаляются автоматические полифилы для Node.js. Раньше webpack фокусировался на возможности запуска большинства модулей Node.js в браузере. Сейчас ситуация изменилась, и многие модули создаются исключительно для использования на фронтенде.</p>

16 <p>Улучшение долгосрочного кэширования также отмечается среди основных изменений. Для этой цели добавлены новые алгоритмы, которые включены по умолчанию в режиме production:</p>

17 <ul><li>chunkIds: "deterministic"</li>

18 <li>moduleIds: "deterministic"</li>

19 <li>mangleExports: "deterministic"</li>

20 </ul><p>Эти алгоритмы присваивают цифровые идентификаторы и имена модулям, чтобы обеспечить возможность детерминированного экспорта.</p>

21 <p>Читабельные идентификаторы чанков, включённые по умолчанию в режиме разработки - ещё одно важное изменение в webpack 5. А новая фича Module Federation позволяет нескольким сборкам работать вместе.</p>

22 <p>Информацию о других изменениях и их подробное описание можно найти<a>в огромном посте, посвящённом релизу webpack 5</a>.</p>

23 <blockquote><h3>Справка</h3>

24 <p>Webpack - сборщик модулей JavaScript. Он формирует готовый для загрузки в браузер файл или набор файлов. Webpack де-факто - стандартный инструмент сборки фронтенда. Подробнее о сборке фронтенда и webpack читайте в нашем гайде<a>"Зачем нужно собирать фронтенд"</a>.</p>

25 </blockquote>