Помимо ника официально выпущен Webpack5!

Webpack

    webpack, как наиболее широко используемый интерфейсный инструмент упаковки, стал частью интерфейсной инженерной инфраструктуры. Прошло 18 лет с момента последнего обновления основной версии Webpack.Через два года давайте посмотрим, какие новые функции принес Webpack 5 и как он поможет нашим приложениям.

Обзор

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

  • Повышение производительности с постоянным кэшированием
  • Принять лучший алгоритм постоянного кэширования и поведение по умолчанию
  • Уменьшите размер пакета за счет оптимизации Tree Shaking и генерации кода.
  • Улучшить совместимость веб-платформ
  • Удалите необоснованное состояние, вызванное отсутствием несовместимых изменений в Webpack4, прежде чем
  • Попытка внести критические изменения сейчас, чтобы подготовиться к будущим функциям, чтобы мы могли использовать Webpack 5 как можно дольше.

     Я должен сказать, что это официальное заявление немного краткое, в нем упоминается только оптимизация производительности постоянного кеша и улучшенное встряхивание дерева, но даже не упоминается важная функция федерации модулей. Давайте проследим за редактором, чтобы увидеть, какие части были обновлены.

Удаление устаревшей функции

  • Во-первых, убрать функцию предупреждения в Webpack4.
  • В то же время IgnorePlugin и BannerPlugin теперь должны передавать параметр, который может быть Object, String или Function.
  • require.includeСинтаксис устарел и будет использоваться с предупреждением. Конечно, такое поведение может бытьRule.parser.requireIncludeчтобы изменить этот синтаксис на разрешенный, устаревший или отключенный
  • Удалите автоматические полифиллы Node.js. В первые дни основной целью Webpack было разрешить запуск модулей Node.js в браузере, но с изменением формата модулей все больше и больше модулей используются только в браузерах.В настоящее время некоторые модули Node ( например, крипто) будут автоматически полифиллы. Это, несомненно, увеличит объем упаковки, и это автоматическое поведение было удалено после Webpack5.

Долгосрочный кэш

  • Детерминированный модуль, идентификатор модуля и имя экспорта.
    • Первый заключается в том, что модуль, идентификатор и имя экспорта определяются однозначно, а за ним стоит соответствующая конфигурация.chunkIds: "deterministic", moduleIds: "deterministic", mangleExports: "deterministic"
    • Среди них модуль и идентификатор модуля используют 3-4-значный цифровой идентификатор, а имя экспорта использует 2-значный цифровой идентификатор.
    • Этот параметр включен по умолчанию, но его также можно изменить с помощью приведенной выше конфигурации.
  • хеш реального контента
    • Фактический хэш содержимого файла используется в Webpack5.[contenthash], вместо того, чтобы просто использовать хэш внутренней структуры файла
    • Это положительно влияет на долгосрочное кеширование, особенно когда в коде изменяются только комментарии и имена переменных, Webpack продолжит использовать предыдущий кеш вместо нового содержимого файла

поддержка развития

  • Во-первых, это семантика идентификаторов фрагментов..
    • Новые идентификаторы фрагментов используют новый синтаксис для генерации идентификаторов фрагментов.Идентификатор фрагмента определяется содержимым фрагмента. так что нам больше не надоimport(/* webpackChunkName: "name" */ "module")отлаживать
    • Но это также может раскрыть конфиденциальное содержимое в чанке (если оно есть), которое можно изменить, изменивchunkIds: "named"изменить это поведение
  • Федерация модулей
    • Эту особенность стоит выделить. Объединение модулей позволяет нескольким сборкам Webpack работать вместе, объединяя несколько сборок во время выполнения, чтобы они выглядели как одна большая сборка.
    • Например, в следующем примере app_one и app_two используют общие["react", "react-dom","react-router-dom"], в то время как app_two предоставляет свой собственный Dialog app_one для использования
    • Проблема прямой взаимозависимости модулей может быть решена нативно через федерацию модулей, особенно в области микро-фронтендов! При этом некоторые базовые зависимости также могут быть изменены на внешние зависимости, и нет необходимости вводить их при локальной разработке.Избежав известной проблемы, что node_modules слишком глубок, можно добиться существенного улучшения в процесс местного развития.
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: "app_two_remote",
      library: { type: "var", name: "app_two_remote" },
      filename: "remoteEntry.js",
      exposes: {
        “./Dialog”: "./src/Dialog"
      },
      remotes: {
        app_one: "app_one_remote",
      },
      shared: ["react", "react-dom","react-router-dom"]
    }),
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      chunks: ["main"]
    })
  ]
};
  • Лучшее встряхивание дерева.
    • Вложенное встряхивание дерева. Webpack теперь будет отслеживать экспортную ссылку, которая лучше оптимизирована для вложенных сценариев, таких как следующий пример.bотсутствует в производственном коде.
// inner.js
export const a = 1;
export const b = 2;

// module.js
import * as inner from "./inner";
export { inner }

// user.js
import * as module from "./module";
console.log(module.inner.a);
  • внутренний модуль. Webpack 4 не будет анализировать зависимости между импортируемыми и экспортируемыми модулями, а Webpack 5 пропуститoptimization.innerGraphЗависимости документа. Например, в следующем примере толькоtestиспользуемый методsometing. Наконец, вы можете сделать маркеры больше экспортных элементов, которые не используются.
import { something } from "./something";

function usingSomething() {
return something;
}

export function test() {
return usingSomething();
}
  • Commondjs. Теперь Webpack поддерживает не только tree Shaking модулей ES, но и модули спецификации commonjs.

Другие преимущества

  • Поддержка новой веб-платформы. В Webpack 5 он начал изначально поддерживать модули JSON, модули активов, собственные рабочие и асинхронные модули и т. д.
  • Код, сгенерированный Webpack, больше не просто ES5, но и код ES6.
  • Минимальная поддерживаемая версия Node.js была обновлена ​​с 6 до 10.

Учащиеся, которым нравятся первые пользователи, теперь могут обновить свой Webpack в соответствии с руководством по миграции.Из соображений осторожности рекомендуется обновить свои собственные практические и фоновые приложения.

Руководство по миграции: https://github.com/webpack/changelog-v5/blob/master/MIGRATION%20GUIDE.md

резюме

     Видно, что за последние два года Webpack5 претерпел множество обновлений, включая повышение производительности, усиление поддержки возможностей разработки и добавление дополнительных функций. Влияние Webpack 5 этим не ограничивается, изменения в зависимостях модулей Module Federation и влияние на существующую модель разработки все еще находятся под дальнейшим наблюдением. С нетерпением жду веб-разработки становится все лучше и лучше.

Для получения большего количества контента, пожалуйста, обратите внимание на публичный аккаунт «Attack Front End 101».

Категории