Webpack打包速度优化方案汇总

// webpack.config.js
module.exports = (env, argv) => {
  const isProduction = argv.mode === 'production';
  
  return {
    mode: isProduction ? 'production' : 'development',
    devtool: isProduction ? 'source-map' : 'eval-cheap-module-source-map',
    // 其他配置...
  };
};

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        include: path.resolve(__dirname, 'src'),
        use: ['babel-loader']
      }
    ]
  },
  resolve: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
    extensions: ['.js', '.jsx'] // 减少扩展名尝试
  }
};

{
  test: /\.js$/,
  exclude: /node_modules/,
  include: path.resolve(__dirname, 'src'),
  use: ['babel-loader?cacheDirectory']
}

use: [
  {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true // 默认缓存目录 node_modules/.cache/babel-loader
    }
  }
]

// 避免不必要的 loader 调用
{
  test: /\.(jpe?g|png|gif|svg)$/,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 8192 // 小于8KB转为base64
      }
    }
    // 移除不必要的 image-webpack-loader 开发环境
  ]
}

const plugins = [
  new webpack.DefinePlugin({/*...*/}),
  isProduction && new MiniCssExtractPlugin()
].filter(Boolean);

plugins: [
  !isDevelopment && new CompressionPlugin(),
  !isDevelopment && new BundleAnalyzerPlugin()
].filter(Boolean)

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');

module.exports = {
  plugins: [
    new HardSourceWebpackPlugin()
  ]
};

resolve: {
  alias: {
    '@': path.resolve(__dirname, 'src'),
    react: path.resolve(__dirname, './node_modules/react')
  },
  symlinks: false // 防止npm link导致的重复解析
}

module: {
  noParse: /jquery|lodash/ // 忽略未模块化的库
}

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'thread-loader',
            options: {
              workers: 2,
              workerParallelJobs: 50,
              poolTimeout: 2000
            }
          },
          'babel-loader'
        ]
      }
    ]
  }
};

// 安装后直接运行
parallel-webpack --config=webpack.config.js

optimization: {
  minimizer: [
    new TerserPlugin({
      parallel: require('os').cpus().length - 1
    })
  ]
}

optimization: {
  removeAvailableModules: false,
  removeEmptyChunks: false,
  splitChunks: false,
  minimize: false
}

{
  test: /\.(js|jsx)$/,
  use: [
    'cache-loader',
    'babel-loader'
  ],
  include: path.resolve('src')
}

watchOptions: {
  aggregateTimeout: 500, // 防抖延迟
  ignored: /node_modules/ // 忽略目录
}

// webpack.dll.config.js
module.exports = {
  entry: {
    vendor: ['react', 'react-dom', 'lodash']
  },
  output: {
    filename: '[name].dll.js',
    path: path.resolve(__dirname, 'dll'),
    library: '[name]_[hash]'
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]_[hash]',
      path: path.join(__dirname, 'dll', '[name]-manifest.json')
    })
  ]
};

// webpack.config.js
plugins: [
  new webpack.DllReferencePlugin({
    manifest: require('./dll/vendor-manifest.json')
  })
]

module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: {
        loader: 'swc-loader',
        options: {
          jsc: {
            parser: {
              syntax: 'ecmascript',
              jsx: true
            }
          }
        }
      }
    }
  ]
}

const { ESBuildMinifyPlugin } = require('esbuild-loader');

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'esbuild-loader',
        options: {
          target: 'es2015'
        }
      }
    ]
  },
  optimization: {
    minimizer: [
      new ESBuildMinifyPlugin({
        target: 'es2015'
      })
    ]
  }
};

// 共享依赖避免重复打包
new ModuleFederationPlugin({
  name: 'app1',
  shared: {
    react: { singleton: true },
    'react-dom': { singleton: true }
  }
})

const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
const smp = new SpeedMeasurePlugin();

module.exports = smp.wrap({
  // 原webpack配置
});

class BuildTimePlugin {
  apply(compiler) {
    let startTime;
    
    compiler.hooks.beforeRun.tap('BuildTime', () => {
      startTime = Date.now();
    });
    
    compiler.hooks.done.tap('BuildTime', stats => {
      console.log(`构建耗时: ${(Date.now() - startTime) / 1000}s`);
    });
  }
}

const path = require('path');
const os = require('os');
const webpack = require('webpack');
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
  mode: 'development',
  devtool: 'eval-cheap-module-source-map',
  cache: {
    type: 'filesystem',
    buildDependencies: {
      config: [__filename]
    }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'thread-loader',
            options: {
              workers: os.cpus().length - 1
            }
          },
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HardSourceWebpackPlugin(),
    new webpack.ProgressPlugin(),
    process.env.ANALYZE && new BundleAnalyzerPlugin()
  ].filter(Boolean),
  resolve: {
    alias: {
      '@': path.resolve('src')
    },
    extensions: ['.js', '.json']
  },
  optimization: {
    removeAvailableModules: false,
    removeEmptyChunks: false,
    splitChunks: false,
    minimize: false
  },
  stats: {
    modules: false,
    children: false,
    chunks: false,
    chunkModules: false
  }
};

1. 添加基础缓存（HardSourceWebpackPlugin）
2. 引入多进程（thread-loader）
3. 分析优化重点（SpeedMeasurePlugin）
4. 实施高级优化（DLL/SWC）

performance: {
  hints: 'warning',
  maxAssetSize: 500 * 1024,
  maxEntrypointSize: 500 * 1024
}