Шаг 4. Оптимизация

Чтобы оптимизировать запуск сервера, сборку проекта и уменьшение размера файлов, нужно вспомнить, что в webpack есть встроенные решения.

Находясь в файле webpack.config.js, добавляем ранее упомянутый кодсплиттинг, который разделит зависимости библиотек React и зависимости нашего проекта:

optimization: {
  splitChunks: {
    minSize: 5000,
    cacheGroups: {
      reactVendor: {
        test: /[\\/]node_modules[\\/](react|react-dom|react-router-dom)[\\/]/,
        name: 'reactVendor',
        chunks: 'all',
        priority: 1,
      },
      defaultVendor: {
        test: /[\\/]node_modules[\\/]/,
        name: 'defaultVendor',
        chunks: 'all',
        minChunks: 1,
        priority: 0,
      },
    },
  },
}

Эта запись идентична рассмотренной в статье. На выходе мы получаем три JS-файла, которые будут размещены в директории со скриптами внутри dist.