最小化 CSS 文件

最小化 CSS 文件

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;
}

以上代码非常容易阅读,但是缺点是生成的文件会非常大:

  • 以上代码空格非常多;并且浏览器会忽略注释,因此可以删除注释内容。
  • h1h2标签具有相同的属性,因此可以改成:h1,h2{}
  • background-color可以改成:background-color:#000

将以上 CSS 代码进行压缩后可以减少文件大小:

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,并在上线前进行压缩。有很多 IDE 带有代码压缩功能,例如”HBuilder“,或者使用在线工具来压缩 CSS 代码。

压缩代码

使用 IDE 压缩代码

如果你使用的是“HBuilder”,则可以在左侧找到要压缩的文件,右击该文件,在菜单中选择压缩。

使用“HBuilder”编辑器来进行代码压缩

这将弹出一个对话框,来确定保存的路径、文件名称和文件类型等。点击确定后你会发现所有的代码将会被压缩到一行内。压缩后的文件会比源文件小了至少四分之一。

使用在线工具压缩代码

有很多的在线压缩工具可供使用,例如 https://tool.oschina.net/jscompress/。将 CSS 代码复制到左侧的文本框中,点击“CSS”压缩,可以在右侧的文本框中复制压缩后的代码。

使用在线工具压缩 CSS、JS 代码

同样,JS 代码也可以使用该文件来进行压缩,在进行压缩前请检查语法等是否有错误,否则压缩后的代码可能无法正常运行。