Webpack打包后CSS体积过大，怎么分析具体是哪些样式占空间？

Des.梦雅提问于 2026-03-13 22:04:22 阅读 4

前端

我用 Webpack 打了个包，发现生成的 main.css 有 300KB，感觉不太对劲。项目里没写那么多样式啊，是不是把没用的 CSS 也打包进去了？

试过用 webpack-bundle-analyzer，但它好像只分析 JS，CSS 没法看明细。有没有办法知道到底是哪些类名或规则撑大了体积？

比如下面这段全局重置样式，会不会被重复引入？

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto;
  line-height: 1.6;
}

我来解答赞 0 收藏

反馈

1 条解答

设计师振艳 Lv1

用 purifycss-webpack 配合 glob 可以在打包时分析并输出被移除的未使用CSS量，看控制台就知道有多少冗余样式被打包进去了。

// webpack.config.js

const PurifyCSS = require('purifycss-webpack');

const glob = require('glob');



module.exports = {

  plugins: [

    new PurifyCSS({

      paths: glob.sync([

        path.resolve(__dirname, './src/**/*.html'),

        path.resolve(__dirname, './src/**/*.js'),

      ]),

      minimize: true,

      verbose: true, // 这个会输出详细信息

    }),

  ],

};

关于你问的全局重置样式重复问题，大概率是 style-resources-loader 配置的问题。如果你全局引入了重置样式，又在每个组件里单独 import，就会重复打包。检查下你的 loader 配置，确认全局样式只引入一次。

2026-03-13 22:14