压缩 CSS

Demián Renzulli
Demián Renzulli
X GitHub 故障

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 缩减功能：最爱小猫。这个版本的网站使用了一个很酷的 CSS 库：animate.css，以便在用户投票给猫 😺? 时，为不同的页面元素添加动画效果。

首先，您需要了解压缩此文件后会出现什么情况：

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

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

Lighthouse：缩减 CSS 大小的机会。

现在，检查 CSS 的内容：

  1. 在 Chrome 中打开“Fav Kitties”网站。（首次运行 Glitch 服务器可能需要一段时间才能响应。）
  2. 按 `Ctrl+Shift+J`（在 Mac 上，按 `Command+Option+J`）打开开发者工具。
  3. 点击网络标签页。
  4. 点击 CSS 过滤条件。
  5. 选中停用缓存复选框。
  6. 重新加载应用。

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

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

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

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

开发者工具 CSS 未优化响应

接下来，您将在构建流程中添加一些 webpack 插件以缩减这些文件。

使用 webpack 缩减 CSS 大小

在着手进行优化之前，请花些时间了解“Fav Kitties”网站的构建流程：

默认情况下，webpack 生成的所生成的 JS 捆绑包将包含内嵌 CSS 文件的内容。由于我们想要维护单独的 CSS 文件，因此我们使用了两个互补插件：

  • mini-css-extract-plugin 会将每个样式表提取到其自己的文件中，这是构建流程的一个步骤。
  • webpack-fix-style-only-entries 用于纠正 wepback 4 中的问题，以避免为 webpack-config.js 中列出的每个 CSS 文件生成额外的 JS 文件。

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

  1. 在 Glitch 中打开 Fav Kitties 项目。
  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. 按 `Ctrl+Shift+J`（在 Mac 上，按 `Command+Option+J`）打开开发者工具。
  2. 点击网络标签页。
  3. 点击 CSS 过滤条件。
  4. 选中停用缓存复选框（如果尚未选中）。
  5. 重新加载应用。

开发者工具 CSS 未优化响应

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

最后一步：

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

该报告未显示“缩减 CSS”问题显示为“Opportunity”（业务机会）并已移至“已通过的审核”部分：

优化页面的 Lighthouse 已通过审核。

由于 CSS 文件是会阻止内容呈现的资源，因此，如果您为使用大型 CSS 文件的网站应用了缩减大小，可以看到 First Contentful Paint 等指标有所改善。

后续步骤和资源

在本指南中，我们介绍了使用 webpack 进行 CSS 缩减，但其他构建工具也可以遵循相同的方法，例如用于 Gulp 的 gulp-clean-css，或者 适用于 Grunt 的 grunt-contrib-cssmin。

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