Webpack 4.x打包产物体积过大（1010KiB）求优化方案

Let's tackle that oversized bundle issue step by step. First, I notice a few areas in your config that can be adjusted to cut down the bundle size significantly, plus some Webpack 4 best practices you might be missing.

1. Fix Babel Config to Enable Tree Shaking #

Your current Babel setup uses the outdated es2015 preset, which converts ES6 modules to CommonJS by default. Webpack's Tree Shaking only works with ES module syntax (import/export), so this is preventing unused code from being eliminated.

Update your .babelrc to use @babel/preset-env with modules: false, and replace the old presets:

{
  "presets": [
    "react",
    ["@babel/preset-env", {
      "modules": false,
      "targets": {
        "node": "6.10" // Match your Node.js version for compatibility
      }
    }],
    "stage-2"
  ],
  "env": {
    "development": {
      "plugins": [
        ["react-transform", {
          "transforms": [{
            "transform": "react-transform-hmr",
            "imports": ["react"],
            "locals": ["module"],
            "preventFullImport": true
          }, {
            "transform": "react-transform-catch-errors",
            "imports": ["react", "redbox-react"],
            "preventFullImport": true
          }]
        }]
      ]
    }
  },
  "plugins": [
    ["transform-object-rest-spread"],
    ["transform-react-display-name"],
    ["module-resolver", { "root": ["./src"] }]
  ]
}

Don't forget to update your Babel dependencies to the latest compatible versions (you'll need @babel/core, @babel/preset-env, babel-loader, etc.) since the old es2015 preset is deprecated.

2. Extract and Minimize CSS Separately #

Right now you're using style-loader, which injects CSS directly into your JavaScript bundle. This bloats bundle.js and prevents browsers from caching CSS separately. Switch to mini-css-extract-plugin to split CSS into its own file, and add css-minimizer-webpack-plugin to compress it:

First, install the plugins:

npm install mini-css-extract-plugin css-minimizer-webpack-plugin --save-dev

Then update your webpack.config.prod.js:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  // ... rest of your existing config
  optimization: {
    minimize: true,
    minimizer: [
      `...`, // Keep Webpack's default JS minimizer (Terser)
      new CssMinimizerPlugin(), // Add CSS compression
    ],
    splitChunks: { // Split third-party dependencies into a separate bundle
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
  plugins: [
    // Remove webpack.LoaderOptionsPlugin (it's deprecated in Webpack 4)
    new MiniCssExtractPlugin({ filename: '[name].css' }), // Extract CSS to separate file
    // ... rest of your plugins (BundleAnalyzerPlugin, CopyWebpackPlugin, etc.)
  ],
  module: {
    rules: [
      // ... your other existing rules
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'] // Replace style-loader
      },
    ]
  }
};

3. Enable Proper Tree Shaking with sideEffects #

Add a sideEffects field to your package.json to tell Webpack which files have side effects (so it doesn't accidentally remove them). If most of your code doesn't have side effects:

{
  "sideEffects": ["*.css"] // Only CSS files have side effects
}

This helps Webpack safely eliminate unused code from your dependencies.

4. Audit Bundle Contents with BundleAnalyzerPlugin #

You already have BundleAnalyzerPlugin enabled—run npm run build and check the generated browser report. Look for:

• Large dependencies you could replace with lighter alternatives (e.g., swap moment with dayjs which is ~2KB vs ~200KB)
• Modules being imported entirely when you only need parts (e.g., if using lodash, switch to lodash-es and import specific functions like import debounce from 'lodash-es/debounce')

5. Clean Up Deprecated Plugins #

webpack.LoaderOptionsPlugin is unnecessary in Webpack 4—loader options are now set directly in the module.rules config. Remove it from your plugins list to avoid potential issues and clean up your setup.

6. Double-Check Moment.js Optimization #

Your IgnorePlugin for moment's locale is a good start, but if you don't need moment at all, replacing it with a smaller library like dayjs or date-fns will cut the bundle size even more. If you do need moment, ensure you're not importing extra locales elsewhere in your code.

After making these changes, rebuild your bundle—you should see a significant size reduction. If some parts are still oversized, use the bundle analyzer to drill down into specific modules contributing the most weight.

内容的提问来源于stack exchange，提问作者Pradeep Jaiswar