CSS 文件压缩

---

如果你的应用加载时间超过 3 秒，你将失去 50% 的访问者。因此，网站加载缓慢会让用户感到沮丧，他们可能会离开你的网站。

然而，网站缓慢的原因有很多，其中之一就是 CSS 文件过大。在实际应用中，我们需要编写大量的 CSS 来为不同的网页设置样式。因此，我们可以压缩 CSS 文件以减小其大小。压缩 CSS 文件时，它会删除文件中的空格、注释等，从而减小 CSS 文件的大小。

本教程将向我们介绍压缩 CSS 文件的各种方法。

使用 Css-minify NPM 包

第一种方法是使用 CSS-minify NPM 包。我们可以在项目中安装 NPM 包来压缩 CSS 文件。

首先，用户需要使用以下命令在项目目录中安装 CSS_minify NPM 包。

npm install css-minify

之后，在终端中转到项目目录，并执行以下命令来压缩特定的 CSS 文件。

npx css-minify -f filename

在上述命令中，将文件名更改为要压缩的 css 文件名。

如果开发者想要压缩特定目录中所有现有的文件，请在终端中执行以下命令。

npx css-minify -d direName

在上述命令中，将“dirName”更改为目录名。

让我们通过下面的例子来了解 CSS 压缩。

示例 1

在下面的示例中，我们将正常的 CSS 代码添加到 CSS 文件中。之后，我们执行上述命令来压缩 CSS 文件。它会创建“css-dist”文件夹，并在包含压缩 CSS 代码的目录中添加 filename.min.css 文件。

在输出中，我们可以看到它删除了空格和注释来压缩 CSS 文件。

.element {
   /* border for element */
   border: 2px solid blue;
   /* text color for element */
   color: red;
   /* adding a gradient to the element as a background */
   background-image: linear-gradient(45deg, #000, #fff);
}
div {
   /* padding for div */
   padding: 10px;
   /* margin for div */
   margin: 10px;
   /* border for div */
   border: 1px solid #000;
}

输出

.element{background-image:linear-gradient(45deg,#000,#fff);border:2px solid blue;color:red}div{border:1px solid #000;margin:10px;padding:10px}

示例 2

这是另一个演示 CSS 压缩的示例。在这个例子中，我们使用了嵌套选择器、伪选择器、渐变函数等。之后，我们使用 CSS-minify NPM 包压缩了 CSS 文件。

li :nth-child(even) {
   /* selecting even elements of the list */
   background-color: #f2f2f2;
   color: green;
   border-radius: 12px;
   /* Applying padding */
   padding: 4px;
}
/* nested selector */
ul li ul {
   display: none;
   text-decoration: dashed;
   color: red;
   /* changing the font size */
   font-size: 12px;
   font-weight: bold;
}
div > p {
   color: blue;
   font-size: 12px;
   font-weight: bold;
}

输出

li :nth-child(2n){background-color:#f2f2f2;border-radius:12px;color:green;padding:4px}ul li ul{color:red;display:none;text-decoration:dashed}div>p,ul li ul{font-size:12px;font-weight:700}div>p{color:blue}

使用在线工具

压缩 CSS 的另一种方法是使用在线工具。市场上有很多工具可以将正常的 CSS 作为输入，并为我们生成压缩的 CSS。

用户应该尝试使用 Toptal 和 CleanCSS 在线工具来压缩 CSS。

但是，在实时开发中，在线工具对于压缩 CSS 并不可用，因为我们无法在每次更改 CSS 代码时手动压缩 CSS。因此，最好使用 NPM 包管理器。