Webpack 3 => 4 upgrade *increased* build time and bundle size... Why?

Question

So to upgrade from webpack 3 to 4 I took these steps:

1. update npm packages:

[email protected] [email protected] [email protected] [email protected] [email protected] [email protected]

2. Add Mode

mode: 'production'

3. remove plugins

   plugins: [ ...,
        new webpack.optimize.UglifyJsPlugin({
         compress: {
           warnings: false,
           comparisons: false
         },
         output: {
           comments: false,
           ascii_only: true
         },
         sourceMap: shouldUseSourceMap
       }),
       new webpack.optimize.CommonsChunkPlugin({name: 'vendor', minChunks: Infinity}),
       new webpack.optimize.DedupePlugin(), ...]
   

4. add optimization settings

   optimization: {
           minimize: true,
           splitChunks: {
             name: 'vendor',
             minChunks: Infinity
           },
           minimizer: [
             new UglifyJsPlugin({
               cache: true,
               parallel: true,
               uglifyOptions: {
                 compress: {
                   warnings: false,
                   comparisons: false
                 },
                 output: {
                   comments: false,
                   ascii_only: true
                 },
                 sourceMap: shouldUseSourceMap
               }
             })
           ]
         }
   

DISSAPPOINTING RESULTS:

Build time:

1min 25s => 1min 35s

File sizes:

// Webpack 3 Build Sizes
File sizes after gzip:

  353.43 KB  build/assets/js/app.51b35332b3f2b8c48450.js
  173.97 KB  build/assets/js/vendor.0f41e4590665fc120169.js
  123.01 KB  build/server/server.js
  20.13 KB   build/assets/css/app.465ba7fe.css

// Webpack 4 Build Sizes
File sizes after gzip:

  516.09 KB   build/assets/js/app.a4fd9dfc5b50361f1055.js
  172.46 KB  build/assets/js/vendor.9ac185907e33a607f6b4.js
  86.05 KB   build/server/server.js
  20.37 KB   build/assets/css/app.css

Q So my question, any idea why webpack 4 upgrade actually INCREASED build time and file sizes?

Q Next, what can I do to get these results to be the same as webpack 3 at least?

I have found some forums about reducing time and size, but I have tried many of them and am not sure how I got these results.

Full Config For Reference

const merge = require('webpack-merge');
const cssFilename = require('./rules').cssFilename;
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const paths = require('../paths');
const webpack = require('webpack');
const appConfig = require('../AppConfig');
const conf = appConfig();
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';

const baseConfig = require('./webpack.base');
const server = require('./webpack.server');
const AssetsPlugin = require('assets-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

const client = merge.smart(baseConfig, {
  mode: 'production',
  bail: true,
  output: {
    path: paths.appBuild,
    filename: 'assets/js/[name].[chunkhash].js',
    chunkFilename: 'assets/js/[name].[chunkhash:8].chunk.js',
    publicPath: `${conf.assetsPath}/`
  },
  module: {
    strictExportPresence: true,
    rules: require('./rules').default('production')
  },
  optimization: {
    minimize: true,
    splitChunks: {
      name: 'vendor',
      minChunks: Infinity
    },
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        uglifyOptions: {
          compress: {
            warnings: false,
            comparisons: false
          },
          output: {
            comments: false,
            ascii_only: true
          },
          sourceMap: shouldUseSourceMap
        }
      })
    ]
  },
  plugins: baseConfig.plugins.concat([
    new ExtractTextPlugin({
      filename: cssFilename
    }),
    new AssetsPlugin({
      path: path.resolve(paths.appBuild, 'assets')
    }),
    new ManifestPlugin({
      fileName: 'assets/webpack-manifest.json'
    }),
    new HtmlWebpackPlugin({
      inject: false,
      template: `!!raw-loader!${paths.appHtml}`,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true
      }
    }),
    new webpack.optimize.AggressiveMergingPlugin()
  ])
});