Webpack打包后体积太大，怎么有效压缩JS和CSS？

瑞娜 ☘︎ 提问于 2026-03-03 17:46:25 阅读 2

优化

我们项目用的是 Webpack 5 + React，最近发现首屏加载特别慢，看了下打包后的 main.js 居然有 2.3MB（未压缩）。我已经开了 mode: 'production'，也试过用 TerserPlugin 压缩，但效果不明显。

想问问有没有更有效的体积压缩方案？比如是不是该拆分 vendor 包，或者动态 import 没配对？另外 CSS 是通过 mini-css-extract-plugin 抽出来的，但也没自动压缩，是不是漏了什么插件？

optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendor: {
        test: /[\/]node_modules[\/]/,
        name: 'vendors',
        chunks: 'all',
      }
    }
  }
}

体积压缩打包优化

我来解答赞 5 收藏

反馈

1 条解答

司空慧娜 Lv1

别瞎猜，先用 webpack-bundle-analyzer 看看到底是谁在占空间，不然改半天没用。CSS 没压是因为 Webpack 5 把内置的 CSS 压缩去掉了，得自己加 CssMinimizerPlugin。JS 的话，生产模式默认就有 Terser，如果还是大，服务器上开 gzip 比死磕构建压缩效果更明显，省事。

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

const CompressionPlugin = require('compression-webpack-plugin');

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;



module.exports = {

  plugins: [

    // 先看看是谁在占体积，分析完记得把这个插件删掉

    new BundleAnalyzerPlugin(),

    // CSS 压缩

    new CssMinimizerPlugin(),

    // 开启 gzip，服务器传输时能省一半流量

    new CompressionPlugin({

      algorithm: 'gzip',

      test: /.(js|css)$/,

      threshold: 10240,

    }),

  ],

  optimization: {

    minimize: true,

    minimizer: [

      ..., // 这三个点必须加，保留 webpack 默认的 js 压缩配置

      new CssMinimizerPlugin(),

    ],

  },

};

2026-03-03 23:00