ASP.NET Core（二十七）性能优化 PurgeCSS 删除未使用代码

小渣渣

需求：在一个项目中，几乎都会引用一些前端框架，例如：TailwindCSS、Bootstrap、MaterializeCSS、Foundation 等，我们可能只会使用里面的一些 CSS 样式，在发布的时候，可以删除未使用的 CSS 代码，从而加速网站访问速度，节省带宽和浏览器内存等。

PurgeCSS 是一个删除未使用的 CSS 的工具。它可以成为您的开发工作流程的一部分。
当你建立一个网站时，你可能会决定使用一个 CSS 框架，如 TailwindCSS、Bootstrap、MaterializeCSS、Foundation 等……但你只会使用一小部分框架，并且会包含很多未使用的 CSS 样式。

这就是 PurgeCSS 发挥作用的地方。 PurgeCSS 分析您的内容和 CSS 文件。然后，它将文件中使用的选择器与内容文件中的选择器进行匹配。它会从 CSS 中删除未使用的选择器，从而生成更小的 CSS 文件。

网址：https://purgecss.com/
GitHub 地址：https://github.com/FullHuman/purgecss

首先，我们可以使用 npm 全局安装 PurgeCSS 包，命令如下：

登录可见。

使用 VS 新建一个 ASP.NET Core MVC 项目，项目默认会使用到 Bootstrap 5 的样式，浏览器加载 bootstrap.min.css 文件大小 163kb，启动项目如下图：



开始使用 PurgeCSS 进行优化，在项目根目录新建 purgecss.config.js 配置文件，内容如下：

登录可见。

PurgeCSS 配置文件参考如下：

interface UserDefinedOptions {
  content: Array<string | RawContent>;
  css: Array<string | RawCSS>;
  defaultExtractor?: ExtractorFunction;
  extractors?: Array<Extractors>;
  fontFace?: boolean;
  keyframes?: boolean;
  output?: string;
  rejected?: boolean;
  rejectedCss?: boolean;
  stdin?: boolean;
  stdout?: boolean;
  variables?: boolean;
  safelist?: UserDefinedSafelist;
  blocklist?: StringRegExpArray;
}

interface RawContent {
  extension: string
  raw: string
}

interface RawCSS {
  raw: string
}

type StringRegExpArray = Array<RegExp | string>;

type ComplexSafelist = {
  standard?: StringRegExpArray;
  deep?: RegExp[];
  greedy?: RegExp[];
  variables?: StringRegExpArray;
  keyframes?: StringRegExpArray;
};

type UserDefinedSafelist = StringRegExpArray | ComplexSafelist;

对 ASP.NET Core 发布至文件夹，通过命令行方式使用 PurgeCSS 删除未使用的 CSS 样式，代码如下：

登录可见。

如下图：



启动发布后的项目，通过浏览器查看 bootstrap.min.css 优化后大小为 20.8 kb，如下图：



也就是说 bootstrap.min.css 源文件大小为 163kb，我们只用到了里面 20.8 kb 的 class 样式，PurgeCSS 帮我们删除了 142 kb 的内容。

（完）

小渣渣

也可以通过 .csproj 发布完成后自动化执行命令，如下图：




配置如下：

登录可见。

该 Message 任务的默认优先级为“正常”，但 VS 的默认日志级别为“最小”。如果您希望消息在默认日志级别可见，请使用  Importance 设置为 high。

小渣渣

命令行，不使用配置文件：

登录可见。