即使在 PurgeCSS 之后，TailwindCSS 构建的 css 文件也太大了

Posted 2023-03-07

【中文标题】即使在 PurgeCSS 之后，TailwindCSS 构建的 css 文件也太大了

【英文标题】：TailwindCSS build css file too big even after PurgeCSS

【发布时间】：2020-09-02 03:42:40

【问题描述】：

在我的 create-react-app 应用程序中，我使用 Tailiwnd CSS 进行样式设置。不幸的是，在运行 npm run build 后，css 文件大小约为 1.4mb，这太大了。在查看该构建文件后，我可以看到所有未使用的类仍然存在，

以下是 package.json 中的脚本：

  "scripts": 
    "build:css": "postcss src/tailwind.css -o src/tailwind.generated.css",
    "watch:css": "postcss src/tailwind.css -o src/tailwind.generated.css --watch",
    "env:dev": "cross-env NODE_ENV=development",
    "env:prod": "cross-env NODE_ENV=production",
    "react-scripts:start": "sleep 5 && react-scripts start",
    "react-scripts:build": "react-scripts build",
    "start": "run-p env:dev watch:css react-scripts:start",
    "build": "run-s env:prod build:css react-scripts:build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  ,

为了缩小构建 css 文件的大小，我使用 Purge CSS 和以下 postcss.config.js：

const purgecss = require('@fullhuman/postcss-purgecss')(
  content: ['./public/**/*.html'],
  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
);

module.exports = 
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    // Purge and minify CSS only production builds only
    ...(process.env.NODE_ENV === 'production'
      ? [purgecss, require('cssnano')]
      : [])
  ]
;

这是tailiwnd.config.js：

module.exports = 
  purge: [
    './src/**/*.html',
    './src/**/*.vue',
    './src/**/*.jsx',
    './src/**/*.js'
  ],
  theme: 
    extend: 
      height: 
        '72': '18rem',
        '80': '20rem',
        '88': '22rem',
        '96': '24rem',
        '104': '26rem'
      ,
      fontFamily: 
        display: 'Raleway, sans-serif'
      
    
  ,
  variants: ,
  plugins: []
;

我所有的 javascript 文件都在 ./src 文件夹中。你知道为什么 CSS 构建文件仍然那么大吗？我只使用了 Tailiwnd 中的几个类，而且应用程序本身非常简单且小巧，

谢谢！

【参考方案1】：

在您的 postcss.config 的第二行中，您仅引用公用文件夹中的 .html 文件。我的猜测是您应该将与 purgeCSS 相关的配置从 tailwind 配置移动到 postcss 配置中。

【讨论】：

感谢您的建议，很有道理。不幸的是，这样做之后 - 生产 css 文件大小仍然与以前相同。看起来它正在用所有顺风类构建 css，无论它们是否被使用。

我一直在为同样的问题拔头发

【参考方案2】：

必须为那些仍有问题的人解决这个问题。问题出在这个条件/比较 process.env.NODE_ENV === 'production' 这将始终评估为错误，因此不会清除和/或压缩 CSS。 默认的 create-react-app 存在问题。 你可能应该改用 webpack，然后你可以运行你认为合适的条件。或者，如果您喜欢黑客攻击，请删除条件，因为已部署的应用程序将始终在生产服务器中运行。如果您对本地开发进行任何更改，请注释掉 purgecss 和 cssnano 并运行构建。由于您使用的是 TailwindCSS，因此您很少会在初始设置后执行此操作。 干杯。