How to shrink webpack 4 bundle?

Question

JavaScript

Good afternoon! Can you please tell me how can I further reduce the webpack bundle?
After switching to webpack 4, the bundle increased by a couple of kilobytes, but it should have decreased.
At the moment webpack gives warnings like this

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  ./fonts/Caramel-Regular.ttf (457 KiB)
  main-6396c.css (414 KiB)
  main-6396fc.js (2.23 MiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (3.04 MiB)
      main-6396fc.css
      main-6396fc.js

WARNING in webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.

Please tell me how to fix them and what else can be done to minimize the bundle itself?
webpack config

const cssA = cssnano({
  autoprefixer: {
    add: true,
    remove: true,
  },
  discardComments: {
    removeAll: true,
  },
  discardDuplicates: true,
  reduceIdents: false,
  safe: true,
  sourcemap: true,
});

module.exports = merge(require('./webpack.def.config'), {
  mode: 'production',
  devtool: 'source-map',
  module: {
    rules: [{
      test: /\.(s?css|sass)$/,
      exclude: /app[\\/](components|scenes)[\\/].+\.scss$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            plugins() {
              return [cssnanoSetup];
            },
          },
        },
        {
          loader: 'sass-loader',
          options: {
            includePaths: ['./node_modules'],
          },
        },
      ],
    }, {
      test: /app[\\/](components|scenes)[\\/].+\.scss$/,
      use: [
        MiniCssExtractPlugin.loader,
        {
          loader: 'css-loader',
          options: {
            modules: true,
            localIdentName: '[local]___[hash:base64:4]',
          },
        },
        {
          loader: 'postcss-loader',
          options: {
            plugins() {
              return [cssA];
            },
          },
        },
        {
          loader: 'sass-loader',
          options: {
            includePaths: ['./node_modules'],
          },
        },
      ],
    }],
  },
  optimization: {
    minimize: true,
    minimizer: [
      new UglifyJSPlugin({
        sourceMap: true,
        uglifyOptions: {
          compress: {
            unused: false,
            dead_code: false,
            warnings: true,
            join_vars: true,
            drop_console: true,
            comparisons: true,
            loops: true,
            drop_debugger: true,
          },
          output: {
            comments: false,
          },
        },
      }),
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'main-[hash:5].css',
      chunkFilename: 'main-[hash:5].css',
      allChunks: true,
    }),
  ],
});

I would be grateful for any help!

Answer 1

Include the webpack-bundle-analyzer in the project before the webpack update. Save stats.json. And also on the new one. Compare what has changed.
In short, find out what's new in the build and dig further.