此插件使用 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
值启用源映射生成。使用启用了 columns
选项的 SourceMapDevToolPlugin
启用源映射生成。
使用源映射将错误消息位置映射到模块(这会降低编译速度)。如果您使用自己的 minify
函数,请阅读 minify
部分以正确处理源映射。
名称 | 类型 | 默认值 | 说明 |
---|---|---|---|
test | 字符串 | 正则表达式 | 数组 <字符串 | 正则表达式> | /\.css(\?.*)?$/i | 用于匹配文件的测试。 |
include | 字符串 | 正则表达式 | 数组 <字符串 | 正则表达式> | 未定义 | 要包含的文件。 |
exclude | 字符串 | 正则表达式 | 数组 <字符串 | 正则表达式> | 未定义 | 要排除的文件。 |
parallel | 布尔值 | 数字 | true | 启用/禁用多进程并行运行。 |
minify | 函数 | 数组 <函数> | CssMinimizerPlugin.cssnanoMinify | 允许覆盖默认的 minify 函数。 |
minimizerOptions | 对象 | 数组 <对象> | { preset: 'default' } | Cssnano 优化 选项。 |
warningsFilter | 函数 <(warning, file, source) -> 布尔值> | () => true | 允许过滤 css-minimizer 警告。 |
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
类型:布尔值 | 数字
默认值:true
使用多进程并行运行来提高构建速度。默认并发运行数:os.cpus().length - 1
。
ℹ️ 并行化可以显著加快构建速度,因此强烈推荐。如果启用并行化,则
minimizerOptions
中的包必须通过字符串(packageName
或require.resolve(packageName)
)进行要求。在minimizerOptions
中了解更多信息
布尔值
启用/禁用多进程并行运行。
webpack.config.js
module.exports = {
optimization: {
minimize: true,
minimizer: [
new CssMinimizerPlugin({
parallel: true,
}),
],
},
};
数字
启用多进程并行运行并设置并发运行数。
webpack.config.js
module.exports = {
optimization: {
minimize: true,
minimizer: [
new CssMinimizerPlugin({
parallel: 4,
}),
],
},
};
minify
类型:函数 | 数组 <函数>
默认值: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 },
},
],
},
}),
],
},
};
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 },
}),
],
},
};
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' },
}),
],
},
};
webpack.config.js
module.exports = {
// Uncomment if you need source maps
// devtool: "source-map",
optimization: {
minimize: true,
minimizer: [
new CssMinimizerPlugin({
minify: CssMinimizerPlugin.esbuildMinify,
}),
],
},
};
@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 } },
}),
],
},
};
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: {},
}),
],
},
};
如果您尚未阅读,请花点时间阅读我们的贡献指南。