如何使用 postcss 在顺风中压缩文件大小？

Posted 2023-03-07

【中文标题】如何使用 postcss 在顺风中压缩文件大小？

【英文标题】：How to compress file size in tailwind using postcss?

【发布时间】：2020-10-27 17:27:47

【问题描述】：

我有以下 postcss.config.js 文件：

// postcss.config.js
module.exports = 
    plugins: [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
    ]

以及以下tailwind.config.js 文件：

// tailwind.config.js
module.exports = 
    purge: [
        './src/cljs/foo/*.cljs',
        './target/cljs-runtime/*.js',
        './target/cljsbuild/public/js/*',
        './target/cljsbuild/public/js/cljs-runtime/*',
        './target/*'
    ],
    theme: ,
    variants: ,
    plugins: [],

我的目标是压缩生成的 css，为此我在 tailwind.config.js 中添加了清除键。

要从 .src tailwind 文件中生成 css，styles.src.css：

@tailwind base;
@tailwind components;
@tailwind utilities;

我正在运行命令：

postcss ./resources/public/css/styles.src.css -o ./resources/public/css/styles.css

从包含tailwind.config.js 和postcss.config.js 的项目的根目录中。然而运行命令后，生成的 css 为 1.2MB，与我没有清除密钥时的 css 一样大。为什么 postcss 清除不起作用？

【问题讨论】：

你的项目中有 webpack.mix.js 文件吗？

不，我不知道，也不知道这与这里有什么关系

好吧，我遇到了同样的问题，我通过管理 webpack 文件中的配置解决了这个问题。对我来说，这是相关的，这就是我问的原因。

【参考方案1】：

postcss 不需要该命令。

只需在tailwind.config.json 中的清除中添加enabled:true 并将您的路径包装到列表中，如https://tailwindcss.com/docs/optimizing-for-production#enabling-manually 中所述：

  purge: 
    enabled: true,
    content: [
        './src/cljs/foo/*.cljs',
        './target/cljs-runtime/*.js',
        './target/cljsbuild/public/js/*',
        './target/cljsbuild/public/js/cljs-runtime/*',
        './target/*'
    ],
  ,

来了！现在您可以运行并查看结果：

npm run build:css

这是我在package.json中使用的命令：

"scripts": 
    "build:css": "tailwind build static/css/tw.css -o static/css/tailwind.css"
  ,

【参考方案2】：

您的 PostCSS 配置在 tailwind.config.js 和 postcss.config.js 之间拆分，而它们应该都在 postcss.config.js 中。

为什么？

Tailwind 在幕后使用 PostCSS。但是 PostCSS 本身并不知道您的 tailwind.config.js 文件。要使用postcss 命令，您需要在postcss.config.js 文件中指定purge 选项，而不是tailwind.config.js。 Tailwind 网站上的This page 详细解释了这两个文件的区别。

这是我的设置：

// postcss.config.js
module.exports = 
    plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
        require('@fullhuman/postcss-purgecss')(
            // Specify the paths to all of the template files in your project
            content: [
              './src/cljs/foo/*.cljs',
              './target/cljs-runtime/*.js',
              './target/cljsbuild/public/js/*',
              './target/cljsbuild/public/js/cljs-runtime/*',
              './target/*'
            ],
            // This extractor will tell PurgeCSS to ignore all CSS selectors and tags used in your files
            defaultExtractor: content => Array.from(content.matchAll(/:?([A-Za-z0-9-_:]+)/g)).map(x => x[1]) || []
        ),
    ]

注意我的 tailwind.config.js 文件是空的：

// tailwind.config.js
module.exports = 
  purge: [],
  theme: 
    extend: ,
  ,
  variants: ,
  plugins: [],

【参考方案3】：

您也可以在postcss.config.js 中添加清除键。

这是我的配置 postcss.config.js

const purgecss = require('@fullhuman/postcss-purgecss')(
  // Specify the paths to all of the template files in your project
  content: ['./src/**/*.js', './public/index.html'],

  // make sure css reset isnt removed on html and body
  whitelist: ['html', 'body'],

  // Include any special characters you're using in this regular expression
  defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [], 
)


module.exports = 
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),

    ...(process.env.NODE_ENV === 'production' ? [purgecss] : []),
  ],

重要：环境变量NODE_ENV负责dev和prod环境。如果您在开发模式下使用 tailwindcss，那么您不想清除，因为您想使用所有可用的样式。通过将其设置为production 模式将通知postcss，因此这将清除未使用的css。

请注意，我没有在 webpack 配置中为 tailwindcss 设置任何配置。

在构建时，请确保将 NODE_ENV 设置为生产用例的特定值。您可以使用'production' 或'prod' 没关系。同样会反映在 postcss.config.js 中。

【参考方案4】：

Tailwind 将自动清除 - 从他们的文档中：

现在，当您在将 NODE_ENV 设置为生产时编译 CSS 时，Tailwind 会自动从您的 CSS 中清除未使用的样式

https://tailwindcss.com/docs/controlling-file-size#basic-usage

您可以为您的开发和生产环境运行命令 - development 将保留所有 Tailwind 的类，production 将运行清除。

package.json:

  "dependencies": 
    "autoprefixer": "^9.8.5",
    "postcss-cli": "^7.1.1",
    "tailwindcss": "^1.5.2"
  ,
  "devDependencies": 
    "cross-env": "^7.0.2"
  ,
  "scripts": 
    "watch": "cross-env NODE_ENV=development postcss static/css/tailwind.css -o  style.css --watch",
    "build": "cross-env NODE_ENV=production postcss static/css/tailwind.css -o  style.css"
  ,

postcss.config.js

module.exports = 
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]