CSS 文件压缩

cssweb developmentfront end technology更新于 2024/5/30 6:04:17

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

然而，网站加载缓慢的原因有很多，其中之一就是 CSS 文件过大。在实际应用中，我们需要编写大量 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: 2px solid blue;
    /* 元素文本颜色 */
    color: red;
    /* 为元素添加渐变作为背景 */
    background-image: linear-gradient(45deg, #000, #fff);
}
div {
    /* div 内边距 */
    padding: 10px;
    /* div 外边距 */
    margin: 10px;
    /* 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) {
    /* 选择列表中的偶数元素 */
    background-color: #f2f2f2;
    color: green;
    border-radius: 12px;
    /* 应用内边距 */
    padding: 4px;
}
/* 嵌套选择器 */
ul li ul {
    display: none;
    text-decoration: dashed;
    color: red;
    /* 更改字体大小 */
    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}