将我的项目从Webpack 3和Babel 6迁移到Webpack 4和Babel 7之后，捆绑包的大小增加了。该项目可以正常编译，但是捆绑包的大小现在比以前大1MB。 我一直在努力减小捆绑包的大小，因此这种行为有点令人失望。我显然错过了一些东西。 「（°ヘ°）

我的旧webpack.config.js（Webpack 3）

const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

process.env.NODE_ENV = process.env.NODE_ENV || 'development'

if (process.env.NODE_ENV === 'test') {
  require('dotenv').config({ path: '.env.test' })
} else if (process.env.NODE_ENV === 'development') {
  require('dotenv').config({ path: '.env.development' })
} else if (process.env.NODE_ENV === 'production') {
  require('dotenv').config({ path: '.env.production' })
} else {
  require('dotenv').config({ path: '.env.development' })
}

module.exports = (env) => {
  const isProduction = env === 'production';
  const CSSExtract = new ExtractTextPlugin('styles.css');

  return {
    entry: ['babel-polyfill','./src/app.js'],output: {
      path: path.join(__dirname,'public','dist'),//absolute path
      filename: 'bundle.js'
    },module: {
      rules: [{
        loader: 'babel-loader',test: /\.js$/,exclude: [
          /node_modules/,/firebase-functions/
        ]
      },{
        test: /\.s?css$/,use: CSSExtract.extract({
          use: [
            {
              loader: 'css-loader',options: {
                sourceMap: true
              }
            },{
              loader: 'sass-loader',options: {
                sourceMap: true
              }
            }

          ]
        })
      },{
        test: /\.(png|jpe?g|gif)$/,use: [
          {
            loader: 'file-loader',options: {},},],{
        test: /\.svg$/,use: ['@svgr/webpack'],}]
    },plugins: [
      CSSExtract,new UglifyJSPlugin(),new webpack.DefinePlugin({
        'process.env.FIREBASE_API_KEY': JSON.stringify(process.env.FIREBASE_API_KEY),'process.env.FIREBASE_AUTH_DOMAIN': JSON.stringify(process.env.FIREBASE_AUTH_DOMAIN),'process.env.FIREBASE_DATABASE_URL': JSON.stringify(process.env.FIREBASE_DATABASE_URL),'process.env.FIREBASE_PROJECT_ID': JSON.stringify(process.env.FIREBASE_PROJECT_ID),'process.env.FIREBASE_STORAGE_BUCKET': JSON.stringify(process.env.FIREBASE_STORAGE_BUCKET),'process.env.FIREBASE_MESSAGING_SENDER_ID': JSON.stringify(process.env.FIREBASE_MESSAGING_SENDER_ID),'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),}),new webpack.IgnorePlugin(/^\.\/locale$/,/moment$/),new BundleAnalyzerPlugin(),devtool: isProduction ? 'source-map' : 'inline-source-map',devserver: {
      contentBase: path.join(__dirname,'public'),historyApiFallback: true,publicPath: '/dist'
    }
  };
}

我的新webpack.config.js（Webpack 4）

'use strict'
const path = require('path')
const webpack = require('webpack')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const TerserPlugin = require('terser-webpack-plugin')

process.env.NODE_ENV = process.env.NODE_ENV || 'development'
if (process.env.NODE_ENV === 'test') {
  require('dotenv').config({ path: '.env.test' })
} else if (process.env.NODE_ENV === 'development') {
  require('dotenv').config({ path: '.env.development' })
} else if (process.env.NODE_ENV === 'production') {
  require('dotenv').config({ path: '.env.production' })
} else {
  require('dotenv').config({ path: '.env.development' })
}

module.exports = (env) => {
  const isDev = env === 'development'
  const bundleName = 'bundle.js'

  const firebasePlugin = new webpack.DefinePlugin({
    'process.env.FIREBASE_API_KEY': JSON.stringify(process.env.FIREBASE_API_KEY),})

  const plugins = isDev ? 
  [
    firebasePlugin,new BundleAnalyzerPlugin()
  ] 
  : 
  [
    firebasePlugin,]

  // build WEBPACK CONFIG
  const config = {}

  config.devserver = {
    contentBase: path.join(__dirname,//absolute path
    historyApiFallback: true,publicPath: '/dist'
  }

  config.mode = env
  config.watch = isDev
  config.resolve = {
    extensions: ['.js','.jsx']
  }
  config.devtool = 'source-map'

  config.entry = ['@babel/polyfill','./src/app.js']

  config.output = {
    path: path.join(__dirname,//absolute path
    filename: bundleName
  }

  config.optimization = {
    minimizer: [
      new TerserPlugin({
        sourceMap: isDev,cache: true,parallel: true,terserOptions: {
          mangle: false,keep_classnames: true,keep_fnames: true,output: {
            comments: false
          }
        }
      })
    ]
  }
  config.plugins = plugins;
  config.module = {
    rules: [
    {
      test: /\.(js|jsx)$/,exclude: [
        /node_modules/,/firebase-functions/
      ],use: {
        loader: 'babel-loader'
      }
    },{
      test: /\.svg$/,loader: 'svg-inline-loader'
    },{
      test: /\.css$/i,use: ['style-loader','css-loader'],{
      test: /\.s[ac]ss$/i,use: [
        'style-loader','css-loader','sass-loader',}
    ]
  }
  return config
}

使用Webpack 3时，我的捆绑包大小为2.6M。现在它的重量为360万。 ：/ 我错过了什么吗？如何优化Webpack以减小捆绑包的大小？

非常感谢！ K