CssMinimizerWebpackPlugin

此外掛程式使用 cssnano 來最佳化並縮小您的 CSS。

就像 optimize-css-assets-webpack-plugin 一樣，但對於使用查詢字串的原始碼對應和資源更準確，允許快取並以平行模式運作。

入門

首先，您需要安裝 css-minimizer-webpack-plugin

npm install css-minimizer-webpack-plugin --save-dev

或

yarn add -D css-minimizer-webpack-plugin

或

pnpm add -D css-minimizer-webpack-plugin

然後將外掛程式新增到您的 webpack 設定中。例如

webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /.s?css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
    ],
  },
  optimization: {
    minimizer: [
      // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
      // `...`,
      new CssMinimizerPlugin(),
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
};

這將只在生產模式中啟用 CSS 最佳化。

如果您也想在開發中執行它，請將 optimization.minimize 選項設定為 true

webpack.config.js

// [...]
module.exports = {
  optimization: {
    // [...]
    minimize: true,
  },
};

並透過您偏好的方法執行 webpack。

關於原始碼對應的注意事項

僅適用於 devtool 選項的 source-map、inline-source-map、hidden-source-map 和 nosources-source-map 值。

為什麼？因為 CSS 僅支援這些原始碼對應類型。

此外掛尊重 devtool 並使用 SourceMapDevToolPlugin 外掛。使用受支援的 devtool 值可啟用原始碼對應產生。將 SourceMapDevToolPlugin 與已啟用的 columns 選項搭配使用可啟用原始碼對應產生。

使用原始碼對應將錯誤訊息位置對應到模組（這會降低編譯速度）。如果您使用自己的 minify 函式，請閱讀 minify 區段以正確處理原始碼對應。

選項

test

類型：字串 | 正規表示式 | 陣列 <字串 | 正規表示式> - 預設值：/\.css(\?.*)?$/i

用於比對檔案的測試。

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({
        test: /\.foo\.css$/i,
      }),
    ],
  },
};

include

類型：字串 | 正規表示式 | 陣列 <字串 | 正規表示式> 預設值：未定義

要包含的檔案。

webpack.config.js

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({
        include: /\/includes/,
      }),
    ],
  },
};

exclude

類型：字串 | 正規表示式 | 陣列 <字串 | 正規表示式> 預設值：未定義

要排除的檔案。

webpack.config.js

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({
        exclude: /\/excludes/,
      }),
    ],
  },
};

parallel

類型：Boolean|Number 預設值：true

使用多處理程序並行執行以提升建置速度。預設同時執行的數量：os.cpus().length - 1。

ℹ️ 平行化可以大幅加快您的建置速度，因此強烈建議啟用。如果啟用平行化，則必須透過字串（packageName 或 require.resolve(packageName)）來要求 minimizerOptions 中的套件。在 minimizerOptions 中閱讀更多資訊

Boolean

啟用/停用多處理程序平行執行。

webpack.config.js

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({
        parallel: true,
      }),
    ],
  },
};

Number

啟用多處理程序並行執行，並設定同時執行的數量。

webpack.config.js

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({
        parallel: 4,
      }),
    ],
  },
};

minify

類型：Function|Array<Function> 預設值：CssMinimizerPlugin.cssnanoMinify

允許覆寫預設的縮小函式。預設情況下，外掛程式會使用 cssnano 套件。對於使用和測試未發佈的版本或分支很有用。

可能的選項

• CssMinimizerPlugin.cssnanoMinify
• CssMinimizerPlugin.cssoMinify
• CssMinimizerPlugin.cleanCssMinify
• CssMinimizerPlugin.esbuildMinify
• CssMinimizerPlugin.lightningCssMinify（以前為 CssMinimizerPlugin.parcelCssMinify，套件已重新命名，但我們保留它以維持向後相容性）
• async (data, inputMap, minimizerOptions) => {return {code: "a{color: red}", map: "...", warnings: [], errors: []}}

警告

當啟用 parallel 選項時，請務必在 minify 函式內使用 require.

Function

webpack.config.js

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({
        minimizerOptions: {
          level: {
            1: {
              roundingPrecision: "all=3,px=5",
            },
          },
        },
        minify: CssMinimizerPlugin.cleanCssMinify,
      }),
    ],
  },
};

Array

如果函數陣列傳遞給 minify 選項，minimizerOptions 也必須是一個陣列。minify 陣列中的函數索引對應到 minimizerOptions 陣列中具有相同索引的選項物件。

webpack.config.js

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({
        minimizerOptions: [
          {}, // Options for the first function (CssMinimizerPlugin.cssnanoMinify)
          {}, // Options for the second function (CssMinimizerPlugin.cleanCssMinify)
          {}, // Options for the third function
        ],
        minify: [
          CssMinimizerPlugin.cssnanoMinify,
          CssMinimizerPlugin.cleanCssMinify,
          async (data, inputMap, minimizerOptions) => {
            // To do something
            return {
              code: `a{color: red}`,
              map: `{"version": "3", ...}`,
              warnings: [],
              errors: [],
            };
          },
        ],
      }),
    ],
  },
};

minimizerOptions

類型：Object|Array<Object> 預設值：{ preset: 'default' }

Cssnano 最佳化 選項。

Object

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({
        minimizerOptions: {
          preset: [
            "default",
            {
              discardComments: { removeAll: true },
            },
          ],
        },
      }),
    ],
  },
};

Array

minify 陣列中的函數索引對應到 minimizerOptions 陣列中具有相同索引的選項物件。如果您使用 minimizerOptions 作為物件，所有 minify 函數都接受它。

如果啟用並行化，則 minimizerOptions 中的套件必須透過字串（packageName 或 require.resolve(packageName)）來需要。在這種情況下，我們不應該使用 require/import。

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({
        minimizerOptions: {
          preset: require.resolve("cssnano-preset-simple"),
        },
      }),
    ],
  },
};

processorOptions（⚠ 僅限 cssnano）

類型：Object 預設值：{ from: assetName }

允許過濾 cssnano 的選項 processoptions。parser、stringifier 和 syntax 可以是函數或表示將匯入的模組的字串。

警告

如果傳遞函數，則必須停用 parallel 選項。.

import sugarss from "sugarss";

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({
        parallel: false,
        minimizerOptions: {
          processorOptions: {
            parser: sugarss,
          },
        },
      }),
    ],
  },
};

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({
        minimizerOptions: {
          processorOptions: {
            parser: "sugarss",
          },
        },
      }),
    ],
  },
};

warningsFilter

類型：Function<(warning, file, source) -> Boolean> 預設值：() => true

允許過濾 css-minimizer 警告（預設為 cssnano）。傳回 true 以保留警告，否則傳回偽值 (false/null/undefined)。

警告

如果您不使用原始碼對應，source 參數將包含 undefined。

webpack.config.js

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({
        warningsFilter: (warning, file, source) => {
          if (/Dropping unreachable code/i.test(warning)) {
            return true;
          }

          if (/file\.css/i.test(file)) {
            return true;
          }

          if (/source\.css/i.test(source)) {
            return true;
          }

          return false;
        },
      }),
    ],
  },
};

範例

使用原始碼對應

別忘了為所有載入器啟用 sourceMap 選項。

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

module.exports = {
  devtool: "source-map",
  module: {
    rules: [
      {
        test: /.s?css$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: "css-loader", options: { sourceMap: true } },
          { loader: "sass-loader", options: { sourceMap: true } },
        ],
      },
    ],
  },
  optimization: {
    minimizer: [new CssMinimizerPlugin()],
  },
  plugins: [new MiniCssExtractPlugin()],
};

移除所有註解

移除所有註解（包括以 /*! 開頭的註解）。

module.exports = {
  optimization: {
    minimizer: [
      new CssMinimizerPlugin({
        minimizerOptions: {
          preset: [
            "default",
            {
              discardComments: { removeAll: true },
            },
          ],
        },
      }),
    ],
  },
};

使用自訂縮小器 csso

webpack.config.js

module.exports = {
  // Uncomment if you need source maps
  // devtool: "source-map",
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({
        minify: CssMinimizerPlugin.cssoMinify,
        // Uncomment this line for options
        // minimizerOptions: { restructure: false },
      }),
    ],
  },
};

使用自訂縮小器 clean-css

webpack.config.js

module.exports = {
  // Uncomment if you need source maps
  // devtool: "source-map",
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({
        minify: CssMinimizerPlugin.cleanCssMinify,
        // Uncomment this line for options
        // minimizerOptions: { compatibility: 'ie11,-properties.merging' },
      }),
    ],
  },
};

使用自訂縮小器 esbuild

webpack.config.js

module.exports = {
  // Uncomment if you need source maps
  // devtool: "source-map",
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({
        minify: CssMinimizerPlugin.esbuildMinify,
      }),
    ],
  },
};

使用自訂縮小器 lightningcss，以前的 @parcel/css

webpack.config.js

module.exports = {
  // Uncomment if you need source maps
  // devtool: "source-map",
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({
        minify: CssMinimizerPlugin.lightningCssMinify,
        // Uncomment this line for options
        // minimizerOptions: { targets: { ie: 11 }, drafts: { nesting: true } },
      }),
    ],
  },
};

使用自訂縮小器 swc

webpack.config.js

module.exports = {
  // Uncomment if you need source maps
  // devtool: "source-map",
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({
        minify: CssMinimizerPlugin.swcMinify,
        // Uncomment this line for options
        // minimizerOptions: {},
      }),
    ],
  },
};

貢獻

如果您尚未閱讀我們的貢獻指南，請花點時間閱讀。

貢獻

授權

MIT