CSS 文件可以包含不必要的字符,例如注释、空格和缩进。 在生产环境中,可以安全地移除这些字符,从而在不影响浏览器处理样式的方式的情况下减小文件大小。这种技术称为“缩减大小”。
正在加载未缩小的 CSS
请查看以下 CSS 代码块:
body {
font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
margin: 2em;
}
/* all titles need to have the same font, color and background */
h1 {
font-style: italic;
color: #373fff;
background-color: #000000;
}
h2 {
font-style: italic;
color: #373fff;
background-color: #000000;
}
此内容易于阅读,但这会生成大于必要文件:
- 它使用空格进行缩进,并且包含评论,这些评论会被浏览器忽略,因此可以移除。
<h1>
和<h2>
元素具有相同的样式:不必单独声明它们:“h1 {...} h2 {...}
”,它们可以表示为“h1, h2{...}
”。- background-color
#000000
可以仅表示为#000
。
进行这些更改后,您将获得相同样式的更紧凑版本:
body{font-family:"Benton Sans","Helvetica Neue",helvetica,arial,sans-serif;margin:2em}h1,h2{font-style:italic;color:#373fff;background-color:#000}
您可能不想编写这样的 CSS。您可以改为照常编写 CSS,并在构建流程中添加缩减步骤。在本指南中,您将了解如何使用热门的构建工具 webpack 执行此操作。
测量
您将把 CSS 缩减功能应用到其他指南中使用过的网站:Fav Kitdies。此版本的网站使用一个很酷的 CSS 库 animate.css,在用户投票选择猫 😺? 时为不同的页面元素添加动画效果。
首先,您需要了解缩减此文件的大小后会出现什么机会:
- 打开衡量页面。
- 输入网址
https://fav-kitties-animated.glitch.me
,然后点击运行审核。 - 点击查看报告。
- 点击效果,然后转到优化建议部分。
生成的报告显示,从 animate.css 文件最多可保存 16 KB:
现在,检查 CSS 的内容:
- 在 Chrome 中打开“最爱的猫咪”网站。(Glitch 服务器首次响应可能需要一段时间)。
- 按 `Control+Shift+J`(在 Mac 上,按 `Command+Option+J`)以打开开发者工具。
- 点击网络标签页。
- 点击 CSS 过滤器。
- 选中 Disable cache 复选框。
- 重新加载应用。
网页请求了两个 CSS 文件,大小分别为 1.9KB 和 76.2KB。
- 点击 animate.css。
- 点击回复标签页以查看文件内容。
请注意,样式表包含空格和缩进字符:
接下来,您要在构建流程中添加一些 webpack 插件,以缩减这些文件。
使用 webpack 实现 CSS Minification
在开始进行优化之前,请花些时间了解 Fav Kitdies 网站的构建流程的工作原理:
默认情况下,webpack 生成的 JS 软件包会包含内嵌的 CSS 文件的内容。由于我们希望维护单独的 CSS 文件,因此我们使用了两个互补的插件:
- mini-css-extract-plugin 将每个样式表提取到其自己的文件中,作为构建流程中的一个步骤。
- webpack-fix-style-only-entries 用于纠正 Webpack 4 中的问题,以避免为 webpack-config.js 中列出的每个 CSS 文件生成额外的 JS 文件。
现在,您将在项目中进行一些更改:
- 在 Glitch 中打开 Fav Kitdies 项目。
- 要查看源代码,请按查看源代码。
- 点击 Remix to Edit,使项目可修改。
- 点击终端(注意:如果“终端”按钮没有显示,您可能需要使用“全屏”选项)。
要缩减生成的 CSS 的大小,您需要使用 optimize-css-assets-webpack-plugin:
- 在 Glitch 控制台中,运行
npm install --save-dev optimize-css-assets-webpack-plugin
。 - 运行
refresh
,以便更改与 Glitch 编辑器同步。
接下来,返回 Glitch 编辑器,打开 webpack.config.js 文件,并进行以下修改:
在文件开头加载模块:js
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
然后,将插件的一个实例传递给 plugins 数组:
js
plugins: [
new HtmlWebpackPlugin({template: "./src/index.html"}),
new MiniCssExtractPlugin({filename: "[name].css"}),
new FixStyleOnlyEntriesPlugin(),
new OptimizeCSSAssetsPlugin({})
]
做出更改后,会触发项目的重新构建。
生成的 webpack.config.js 如下所示:
接下来,您将使用效果工具查看这项优化的效果。
验证
- 若要预览网站,请按查看应用,然后按全屏 。
如果您在之前的任何步骤中迷失方向,可以点击此处打开网站的优化版本。
如需检查文件的大小和内容,请执行以下操作:
- 按 `Control+Shift+J`(在 Mac 上,按 `Command+Option+J`)以打开开发者工具。
- 点击网络标签页。
- 点击 CSS 过滤器。
- 选中停用缓存复选框(如果尚未选中)。
- 重新加载应用。
通过检查这些文件,您可以发现新版本不包含任何空格。两个文件都小得多,特别是 animate.css 的大小缩减了~26%,节省了~26%!
最后的步骤:
- 打开衡量页面。
- 输入经过优化的网站的网址。
- 点击查看报告。
- 点击效果,然后找到优化建议部分。
该报告不再将“缩减 CSS 大小”显示为“优化建议”,现已移至“已通过审核”部分:
由于 CSS 文件属于阻塞渲染的资源,因此,如果您对使用大型 CSS 文件的网站应用缩减大小,就会发现 First Contentful Paint 等指标有所改善。
后续步骤和资源
在本指南中,我们介绍了 webpack 的 CSS 缩减大小,但同样的方法,同样适用于其他构建工具,例如适用于 Gulp 的 gulp-clean-css,或适用于 Grunt 的 grunt-contrib-cssmin。
缩减大小也可以应用于其他类型的文件。请参阅“缩减和压缩网络载荷”指南,详细了解用于缩减 JS 大小的工具以及一些辅助技术(例如压缩)。