架构师_程序员_码农网

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 339|回复: 2

[技巧] ASP.NET Core(二十七)性能优化 PurgeCSS 删除未使用代码

[复制链接]
发表于 2024-5-8 19:13:56 | 显示全部楼层 |阅读模式
需求:在一个项目中,几乎都会引用一些前端框架,例如: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,启动项目如下图:

QQ截图20240508185842.jpg

开始使用 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 样式,代码如下:

如下图:

QQ截图20240508191137.jpg

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

QQ截图20240508191306.jpg

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

(完)




上一篇:ASP.NET MVC 使用 Autofac 添加全局过滤器
下一篇:ASP.NET Core(二十八)存储开发中的应用机密
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
 楼主| 发表于 2024-5-8 21:07:25 | 显示全部楼层
也可以通过 .csproj 发布完成后自动化执行命令,如下图:


QQ截图20240508210700.jpg

配置如下:


该 Message 任务的默认优先级为“正常”,但 VS 的默认日志级别为“最小”。如果您希望消息在默认日志级别可见,请使用  Importance 设置为 high。
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
 楼主| 发表于 2024-5-16 10:47:52 | 显示全部楼层
命令行,不使用配置文件:

码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

免责声明:
码农网所发布的一切软件、编程资料或者文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。如有侵权请邮件与我们联系处理。

Mail To:help@itsvse.com

QQ|手机版|小黑屋|架构师 ( 鲁ICP备14021824号-2 )|网站地图

GMT+8, 2024-6-18 17:34

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表