Webpack+VueJS打包体积优化无效问题求助

Let's dig into why your optimization efforts aren't moving the needle on your bundle size, and fix the misconfigurations that are blocking progress.

1. The Critical Vue CLI 3 Configuration Gap #

First off, the biggest gotcha here: your root-level webpack.config.js is probably not being used at all. Vue CLI 3 doesn't automatically pick up this file—it uses its own internal Webpack setup, and you need to extend it via a vue.config.js file in your project root instead.

To confirm this, run vue inspect > webpack-output.js in your terminal. This will spit out the actual Webpack configuration Vue CLI is using. If none of your custom plugins or optimizations show up here, your webpack.config.js is being ignored entirely.

2. Conflicting & Deprecated Plugins in Your Config #

Looking at your current setup, several issues are either canceling out optimizations or using outdated tools:

• Deprecated CommonsChunkPlugin: Webpack 4+ (used by Vue CLI 3) replaced this with optimization.splitChunks. Having both in your config causes conflicts and breaks chunk splitting.
• Redundant Uglification: When mode: 'production' is set, Webpack automatically enables Terser (the modern replacement for UglifyJsPlugin). Adding UglifyJsPlugin manually can override or conflict with the default setup, and your DefinePlugin syntax is invalid (you've nested process.env incorrectly).
• Duplicate Moment.js Optimizations: You're using both ContextReplacementPlugin and IgnorePlugin for Moment.js, and the ContextReplacementPlugin has a broken regex (/^\./(en|zh-tw)$/ should be /^(en|zh-tw)$/).
• Incorrect CSS Loader Setup: For standalone .css files, your rule uses vue-loader (meant for .vue files). You should use css-loader instead to process plain CSS.

3. Step-by-Step Fixes #

A. Switch to vue.config.js #

Create a vue.config.js file in your project root (rename or delete your old webpack.config.js to avoid confusion). Here's how to port your valid optimizations to Vue CLI's format:

const path = require('path');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const OfflinePlugin = require('offline-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  outputDir: 'build/client',
  publicPath: 'build/client',
  configureWebpack: (config) => {
    // Add environment-specific plugins
    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(
        new CompressionPlugin({
          asset: '[path].gz[query]',
          algorithm: 'gzip',
          test: /\.js$|\.css$|\.html$/,
          threshold: 10240,
          minRatio: 0
        }),
        new OfflinePlugin({
          AppCache: false,
          externals: ['./'],
          ServiceWorker: { events: true }
        })
      );

      // Update optimization settings
      config.optimization = {
        ...config.optimization,
        runtimeChunk: { name: 'runtime' },
        splitChunks: {
          chunks: 'all',
          maxInitialRequests: Infinity,
          minSize: 0,
          cacheGroups: {
            vendor: {
              test: /[\\/]node_modules[\\/]/,
              name(module) {
                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
                return `npm.${packageName.replace('@', '')}`;
              }
            }
          }
        }
      };
    }

    // Add global plugins
    config.plugins.push(
      new BundleAnalyzerPlugin(),
      // Fix Moment.js optimization
      new config.webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      new MiniCssExtractPlugin({
        filename: '[name].css',
        chunkFilename: '[id].css'
      })
    );

    // Set Vue alias
    config.resolve.alias = {
      ...config.resolve.alias,
      'vue$': 'vue/dist/vue.esm.js'
    };
  },
  chainWebpack: (config) => {
    // Fix CSS loader rule for standalone .css files
    config.module
      .rule('css')
      .test(/\.css$/)
      .use(MiniCssExtractPlugin.loader)
      .loader(MiniCssExtractPlugin.loader)
      .options({ publicPath: '../' })
      .end()
      .use('css-loader')
      .loader('css-loader');
  }
};

B. Verify Config is Applied #

• Run vue inspect again to confirm your plugins and optimizations appear in the output.
• Add a console.log('Custom config loaded!') inside configureWebpack—you should see this message when running npm run build.

C. Clean Caches #

Old build caches can mask changes. Run these commands to start fresh:

# Clear npm cache
npm cache clean --force
# Delete dependencies and lock file
rm -rf node_modules package-lock.json
# Reinstall dependencies
npm install
# Delete previous build output
rm -rf build/client

4. Additional Checks #

• Check Gzip vs Raw Size: Your CompressionPlugin creates .gz files, but npm run build outputs uncompressed files by default. Use the BundleAnalyzerPlugin report to view uncompressed sizes, which is what users will download before gzip.
• Service Worker Cache: If you're using the PWA plugin, old service worker caches might serve outdated bundles. Clear your browser's cache or enable automatic service worker updates in your app.

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