从 Webpack 3 升级后的 Webpack 4 包大小

Question

将我的项目从 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),
    '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),
  })

  const plugins = isDev ? 
  [
    firebasePlugin,
    new BundleAnalyzerPlugin()
  ] 
  : 
  [
    firebasePlugin,
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
  ]

  // build WEBPACK CONFIG
  const config = {}

  config.devServer = {
    contentBase: path.join(__dirname, 'public'), //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, 'public', 'dist'), //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

Answer 1

我认为你的图片有问题（也许所有的图片都内嵌到你的 js 中？）。你的 webpack4 的 file-loader 配置在哪里？你现在如何加载它？如果您愿意分享 wp3 和 wp4 的结果包，我可以提供更多帮助。

我看到了一些优化：
1) 将 terserOptions.mangle 设置为真。它不会重命名您的属性（因为 mangle.properties 在您不将 mangle 属性设置为 { properties: true } 之前被禁用），我认为 bundle 会起作用。和其他更简洁的选项可以减少
2) babel/polyfill 是个大东西，你不需要它的完整版。此外，它已被弃用，取而代之的是 core-js@3。 babel 现在有一个很好的特性 useBuiltIns: usage，它将只包含你需要的 polyfills。

从 Webpack 3 升级后的 Webpack 4 包大小

Webpack 4 bundle size after upgrade from Webpack 3

webpack

babeljs

babel-polyfill

babel-loader

webpack-4