CSS教程
CSS进阶

CSS 压缩

CSS文件的压缩意味着从源代码中消除了不必要的字符以减小文件的大小。压缩的主要目的是提高网站的速度。
当任何用户在网页上请求时,将发送压缩的版本,而不是发送完整版本。这样可以降低带宽成本,并缩短响应时间。压缩有助于减少不必要的字符,例如换行符,空格,块定界符和注释,这有助于使站点可访问并提高搜索引擎的排名。
压缩的CSS文件以扩展名 '.min.css'结尾。
压缩与压缩不同。压缩用于减少压缩文件的大小,但它不会影响代码的结构和样式。压缩后,压缩后的代码对于人类而言更难于阅读,对于机器而言则更难阅读。这是因为该计算机并不关心空格和代码的优美之处。

如何压缩CSS文件?

有多种在线工具可用于压缩CSS文件。我们可以使用它们来减小CSS文件的大小。让我们讨论一下。

CSS minifier-在线工具

这是一个在线工具,可帮助我们压缩CSS文件。您可以通过以下链接使用此工具:https://cssminifier.com/。该工具易于使用。在此工具中,首先,我们必须粘贴我们的源代码,或直接上载源代码文件。然后,我们需要单击"压缩"按钮以压缩CSS文件。完成此过程后,我们的CSS代码将压缩,然后在压缩的输出列中看到它。
让我们看看它是如何工作的。
 CSS minify

smallseotools.com

它为我们提供了减少CSS文件的CSS压缩器工具。您可以通过以下链接使用此工具:https://smallseotools.com/minify-css/。这是一个简单的工具。在这里,首先,我们必须复制代码,或者我们也可以上传源代码文件。之后,它将最小化代码,并允许我们复制或下载压缩后的代码。
最小化CSS文件的第二种方法是使用npm命令。

css-minify npm

首先,我们必须使用以下命令安装该工具。
npm install css-minify -g
在终端窗口中运行上述命令。需要一些时间。然后,要压缩CSS文件,请键入以下命令并带有相应的文件名。
css-minify -f文件名
在使用上述命令之前,我们必须确保文件名必须以 .css 扩展名结尾。
以上命令用于压缩单个CSS文件。如果有多个CSS文件,则我们必须使用以下命令来压缩整个源目录。
css-minify -d sourcedir
在这里,我们需要在存储压缩CSS文件的同一目录中创建一个新文件夹 'css-dist'
让我们看看
在这里,我们有一个CSS文件名 '示例.css'。让我们使用上面的命令将其最小化。
在终端窗口中打开包含CSS文件的相同目录和文件夹。之后,使用要压缩的文件名运行命令。可以在下图中看到:
 CSS minify
现在,我们可以看到压缩的源代码新文件 'css-dist'中的文件,并带有相应的文件名和扩展名 .min.css
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4