Как уменьшить bundles webpack 5?

Вебпак 5 предоставляет несколько способов уменьшения размера бандлов. Вот некоторые из них:

1. Минификация кода: Вебпак поставляется с плагинами, такими как TerserPlugin или UglifyJsPlugin, которые позволяют минифицировать и оптимизировать код JavaScript. Они удаляют ненужные пробелы, комментарии и сокращают имена переменных, что позволяет сократить размер файлов и улучшить производительность загрузки.

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [new TerserPlugin()],
  },
};

2. Оптимизация изображений: С помощью плагинов, таких как image-webpack-loader или url-loader, можно оптимизировать изображения, включая их сжатие. Это может существенно уменьшить размер бандлов, особенно если в проекте есть большое количество или большие изображения.

module.exports = {
  module: {
    rules: [
      {
        test: /.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192, // ограничение для преобразования в base64
            },
          },
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true,
                quality: 65,
              },
              // оптимизация gifsicle, pngquant, svgo
              enabled: false,
            },
          },
        ],
      },
    ],
  },
};

3. Разделение кода: Вебпак позволяет разделять код на небольшие фрагменты, называемые чанками, и загружать их по требованию. Это особенно полезно, если есть некоторые части кода, которые редко используются или огромны. Это также позволяет уменьшить объем кода, который нужно загружать в начальный бандл, что может ускорить загрузку вашего приложения.

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

4. Удаление неиспользуемого кода: С помощью плагина Tree shaking вебпак может обнаружить и удалить неиспользуемый код из бандлов. Это возможно, если используется современный синтаксис модулей, такой как ECMAScript 6, и если ваш код не имеет побочных эффектов. Вебпак 5 поддерживает триминг кода с использованием новой настройки moduleSideEffects.

module.exports = {
  // ...
  optimization: {
    usedExports: true,
  },
};

5. Ленивая загрузка: Ленивая загрузка позволяет загружать только те модули, которые действительно нужны. Вебпак позволяет использовать динамические импорты или использовать специальные синтаксические конструкции, такие как import() или require.ensure. Это поможет снизить размер бандлов, так как не все модули будут загружены сразу.

import('./module').then((module) => {
  // ...
});

6. Конфигурация mode: Вебпак предлагает различные конфигурационные режимы, такие как development и production, которые оптимизируют вашу сборку для соответствующей среды. Режим production включает в себя автоматическую минификацию и другие оптимизации, которые помогут уменьшить размер бандлов.

module.exports = {
  mode: 'production',
  // ...
};

Это лишь несколько способов уменьшения размера бандлов вебпак 5. Однако, в зависимости от конкретного проекта и его потребностей, могут быть и другие методы и инструменты для оптимизации бандлов.