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代码的目录中创建了’css-dist’文件夹，并添加了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}