压缩 CSS

德米安·伦祖利
Demián Renzulli
Twitter GitHub Glitch

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，在用户投票选择猫 😺? 时为不同的页面元素添加动画效果。

首先，您需要了解缩减此文件的大小后会出现什么机会：

  1. 打开衡量页面。
  2. 输入网址 https://fav-kitties-animated.glitch.me，然后点击运行审核。
  3. 点击查看报告。
  4. 点击效果，然后转到优化建议部分。

生成的报告显示，从 animate.css 文件最多可保存 16 KB：

Lighthouse：缩减 CSS 的规模。

现在，检查 CSS 的内容：

  1. 在 Chrome 中打开“最爱的猫咪”网站。（Glitch 服务器首次响应可能需要一段时间）。
  2. 按 `Control+Shift+J`（在 Mac 上，按 `Command+Option+J`）以打开开发者工具。
  3. 点击网络标签页。
  4. 点击 CSS 过滤器。
  5. 选中 Disable cache 复选框。
  6. 重新加载应用。

开发者工具 CSS 未优化跟踪记录

网页请求了两个 CSS 文件，大小分别为 1.9KB 和 76.2KB。

  1. 点击 animate.css。
  2. 点击回复标签页以查看文件内容。

请注意，样式表包含空格和缩进字符：

开发者工具 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 文件。

现在，您将在项目中进行一些更改：

  1. 在 Glitch 中打开 Fav Kitdies 项目。
  2. 要查看源代码，请按查看源代码。
  3. 点击 Remix to Edit，使项目可修改。
  4. 点击终端（注意：如果“终端”按钮没有显示，您可能需要使用“全屏”选项）。

要缩减生成的 CSS 的大小，您需要使用 optimize-css-assets-webpack-plugin：

  1. 在 Glitch 控制台中，运行 npm install --save-dev optimize-css-assets-webpack-plugin。
  2. 运行 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 如下所示：

接下来，您将使用效果工具查看这项优化的效果。

验证

  • 若要预览网站，请按查看应用，然后按全屏 全屏。

如果您在之前的任何步骤中迷失方向，可以点击此处打开网站的优化版本。

如需检查文件的大小和内容，请执行以下操作：

  1. 按 `Control+Shift+J`（在 Mac 上，按 `Command+Option+J`）以打开开发者工具。
  2. 点击网络标签页。
  3. 点击 CSS 过滤器。
  4. 选中停用缓存复选框（如果尚未选中）。
  5. 重新加载应用。

开发者工具 CSS 未优化响应

通过检查这些文件，您可以发现新版本不包含任何空格。两个文件都小得多，特别是 animate.css 的大小缩减了~26%，节省了~26%！

最后的步骤：

  1. 打开衡量页面。
  2. 输入经过优化的网站的网址。
  3. 点击查看报告。
  4. 点击效果，然后找到优化建议部分。

该报告不再将“缩减 CSS 大小”显示为“优化建议”，现已移至“已通过审核”部分：

Lighthouse 已通过优化的审核。

由于 CSS 文件属于阻塞渲染的资源，因此，如果您对使用大型 CSS 文件的网站应用缩减大小，就会发现 First Contentful Paint 等指标有所改善。

后续步骤和资源

在本指南中，我们介绍了 webpack 的 CSS 缩减大小，但同样的方法，同样适用于其他构建工具，例如适用于 Gulp 的 gulp-clean-css，或适用于 Grunt 的 grunt-contrib-cssmin。

缩减大小也可以应用于其他类型的文件。请参阅“缩减和压缩网络载荷”指南，详细了解用于缩减 JS 大小的工具以及一些辅助技术（例如压缩）。