Почему разработчики фронтенда должны быть экспертами по Webpack

4 веских причины начать углубленное изучение Webpack уже сегодня

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

Но знаете ли вы, что вы можете использовать Webpack для решения некоторых из этих проблем?

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

1. Повысьте продуктивность разработчиков.

Как разработчики, мы всегда хотим видеть более быструю обратную связь при внесении изменений в код. Кроме того, мы используем разные методы.

Если вы хорошо знаете Webpack, вы можете легко включить его функцию Горячая замена модуля, чтобы улучшить процесс разработки.

Горячая замена модуля (HMR) позволяет нам изменять модули, пока они находятся в рабочем состоянии. Поскольку HMR предотвращает полную перезагрузку приложения, оно останется в том же состоянии и будет обновлять только то, что было изменено.

Все, что вам нужно, это обновить конфигурацию webpack-dev-server и использовать его встроенный HMR plugin.

....
module.exports = {
  entry: {
    app: './src/index.js',
  },
  ...
  devServer: {
    contentBase: './dist',
    hot: true,  // <--- Add this line
  },
  plugins: [
    ...
    new HtmlWebpackPlugin({
      title: 'Hot Module Replacement',
    }),
  ],
  output: {
      ...
  },
};

Совет для профессионалов: HMR становится очень удобным в ситуациях, когда вы разрабатываете веб-приложения для различных форм-факторов устройства. Например, вы можете получить доступ к URL-адресу сервера разработки как на настольном, так и на мобильном устройстве и сразу увидеть, как он выглядит на обоих.

2. Станьте лучше в тряске деревьев

Если в вашем проекте много мертвого кода или большое количество общих библиотек, часто возникает длительное время загрузки приложения. В таких ситуациях часто можно увидеть встряхивание дерева, чтобы избежать объединения мертвого или нежелательного кода.

....
module.exports = {
  entry: {
    app: './src/index.js',
  },
  output: {
      ...
  },
  //add below line 
  mode: 'development',
  optimization: {
    usedExports: true,
  },
};

Но как мы можем гарантировать, что Webpack примет правильное решение относительно неиспользуемых кодов в проекте?

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

Webpack использует специальную конфигурацию в package.json файле с именем sideEffects. По умолчанию все файлы в вашем проекте считаются файлами с побочными эффектами, и встряхивание дерева не выполняется.

Однако мы можем вручную изменить это поведение, изменив значение sideEffects на false, true или предоставив массив с именами файлов.

// All files have side effects 
"sideEffects": true
// No files have side effects
"sideEffects": false
//Only these files have side effects,
 "sideEffects": [
  "./src/file1.js",
  "./src/file2.js"
 ]
}

Если вы включили встряхивание дерева в конфигурации Webpack, убедитесь, что в package.json настройках файлов включены файлы, не вызывающие побочных эффектов.

Совет: создавайте отличные дизайн-системы и микро-интерфейсы

Выведите фронтенд-разработку на новый уровень с помощью независимых компонентов. Создавайте и совместно работайте над приложениями на основе компонентов, чтобы легко разблокировать Micro Frontend и обмениваться компонентами.

Инструменты OSS, такие как Bit, предлагают отличный опыт разработки для создания и компоновки независимых компонентов, а также создания в одиночку или вместе с вашей командой.

Попробуйте →

3. Использование разделения кода для оптимизации времени загрузки приложения

Если вы отслеживаете количество неиспользуемых байтов в одном пакете с помощью Chrome DevTools, вы будете поражены, увидев, как часто это происходит.

Webpack предоставляет идеальное решение, позволяя разделить код на разные пакеты и загружать их по запросу или параллельно.

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

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

....
module.exports = {
  mode: 'development',
  entry: {
    index: './src/index.js',
    second: './src/second-module.js',
  },
  output: {
   filename: '[name].bundle.js',
   path: path.resolve(__dirname, 'dist'),
   },
};

Однако этот подход не очень гибкий, и существует риск дублирования модулей между блоками. Если вы не видите каких-либо улучшений в этом подходе, вы можете пойти глубже, используя подход Предотвращение дублирования .

Подход Предотвращение дублирования позволяет указать общие модули между чанками с помощью опции dependOn. Вы можете легко преобразовать подход точки входа, чтобы предотвратить дублирование с небольшими изменениями.

....
module.exports = {
  mode: 'development',
  entry: {
    index: {
      import: './src/index.js',
      dependOn: 'shared',
    }, 
    second: {
      import: './src/second.js',
      dependOn: 'shared',
    }, 
    shared: 'shared-module',
  },
 ...
};

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

optimization: {
  splitChunks: {
    chunks: 'all',
  },
},

Если вас не устраивает подход Предотвратить дублирование, вы можете перейти к подходу Динамический импорт.

Я думаю, вы уже понимаете силу разделения кода Webpack и объем знаний, необходимых для его настройки. Поэтому я не буду вдаваться в подробности подхода Динамический импорт, и вы легко сможете понять его, если поняли два предыдущих.

4. Поддерживает микро-фронтенды с модульной федерацией.

Объединение модулей - это захватывающая архитектура JavaScript, которая позволяет динамически импортировать код из другого приложения во время выполнения.

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

Все, что вам нужно сделать, это выполнить следующие 4 простых шага:

1. Импортируйте плагин в оба приложения.
2. Внесите необходимые изменения в конфигурацию Webpack для первого приложения и предоставьте доступ к компонентам, к которым необходимо предоставить общий доступ.
3. Импортируйте общий компонент в конфигурации Webpack второго приложения.

Однако это может быть не так просто, когда вы начнете реализацию. Вы должны быть очень осторожны с конфигурациями Webpack и вносить только необходимые изменения.

Например, в первом приложении вам не нужно ничего менять, кроме раздела плагинов.

const { ModuleFederationPlugin } = require(“webpack”).container;
...
plugins: [
  new ModuleFederationPlugin({
    name: "application1",
    library: { type: "var", name: "app1" },
    filename: "remoteEntry.js",
    exposes: {
      // expose each component
      "./Component1": "./src/components/Component1",
    },
      shared: ["react", "react-dom"],
    }),
    ...
  ],
...

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

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

Заключение

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

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

Итак, важно признать, что Webpack - это не только сборщик модулей, но и основа современной веб-разработки.

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

Надеюсь, статья окажется полезной. Спасибо за чтение !!!

Учить больше