久违地，我带着一个有趣的实验结果回到了我的开发博客。作为一个热爱Django的人，突然对网页前端优化的一部分CSS Minification产生了好奇，进行了亲自实验，结果相当有趣，想要和大家分享。特别是对像我一样主要使用Python的开发者们来说，这将是有意义的内容。

进行这个实验的原因：突然产生的疑问❓

在开发网页服务时，常常不自觉地会想“前端优化果然是基于JavaScript（Node.js）的工具最优秀！”。由于Node.js生态系统主导了前端构建和优化工具，这样的先入之见是不足为奇的。CSS Minification（CSS压缩）也是如此。 webpack、gulp等构建工具中包含的 css-minimizer-webpack-plugin和 clean-css等基于Node.js的库让人觉得像是标准一样。

甚至像ChatGPT、Gemini这样的AI在请求推荐CSS压缩工具时，几乎总是首选npm的clean-css-cli，并附带“这个工具最快、最强大”的补充说明。

然而，突然有了这样的疑问。

“究竟连近乎简单文本压缩的CSS Minification，Node.js基础的工具是否真的比Python基础的工具要压倒性快或有效呢？我真的必须为了前端优化而设置Node.js环境吗？”

为了找到这个问题的答案，我开始了一个小实验。

实验内容和过程

实验很简单。以我现在运营的博客的主CSS文件之一style.css（约67KB）为对象，使用基于Node.js的clean-css-cli和基于Python的csscompressor这两种工具进行压缩，然后比较其结果文件的大小和内容。

1. 原文件确认

jesse@laptop:~/my/path/to/css$ ll style.css
-rw-rw-r-- 1 jesse jesse 67325  5月 23 19:10 style.css

原始的style.css文件大小为67,325字节。（为了可读性，包含空格、换行和注释等）

2. 使用Node.js clean-css-cli进行压缩

通过npm全局安装clean-css-cli，将style.css压缩为style.min.css。

jesse@laptop:~/my/path/to/css$ npm install -g clean-css-cli
jesse@laptop:~/my/path/to/css$ cleancss -o ./style.min.css ./style.css

3. 使用Python csscompressor进行压缩

在Python环境中，使用csscompressor模块将style.css压缩为python_style.min.css。

(venv)jesse@laptop:~/my/path/to/css$ python -m csscompressor style.css > python_style.min.css

4. 结果文件大小比较

使用ll命令比较压缩后生成的文件大小。

jesse@laptop:~/my/path/to/css$ ll style*
-rw-rw-r-- 1 jesse jesse 67325  5月 23 19:10 style.css         # 原文件
-rw-rw-r-- 1 jesse jesse 46740  6月 23 22:39 style.min.css     # npm clean-css结果
-rw-rw-r-- 1 jesse jesse 46828  6月 23 23:47 python_style.min.css # Python csscompressor结果

5. 打开压缩文件进行内容目视比较

CSS压缩比较结果截图

我使用nvim打开了两个压缩文件，从内容上进行了目视比较。（请参考上文的截图）

实验结果分析

  • 原始style.css (67,325 bytes)
  • clean-css-cli (style.min.css) (46,740 bytes): 大约减少了30.58%!
  • csscompressor (python_style.min.css) (46,828 bytes): 大约减少了30.45%!

看到这结果我也吓了一跳。

  1. 压倒性的大小减少效果：这两种工具都将原始CSS文件大小减少了30%以上。这清楚地表明，空格、换行、注释等为了可读性而添加的所有不必要字符实际上占用了字节，仅仅去除这些字符，就能够带来显著的文件大小节省效果，并直接有助于提高网页服务的加载速度。请在发布应用程序时，不要因麻烦而忽视，务必进行压缩。这比想象中的效果要大。
  2. 几乎没有差别的压缩效率： clean-css-cli比csscompressor仅小88字节，但在压缩效率上表现出实际上是同一水平的性能。
  3. 相同的结果内容：通过nvim比较，发现两个压缩文件的内容几乎完全一致。简直让人无法理解这88字节的差异是如何产生的。看来，不同工具内部使用的算法或优化方式有些微差异，但这些差异可以忽略不计，最终都达到了去除不必要元素的目标。

这个实验的意义和启示：打破先入之见！

我实验结果传达出的最大信息就是“前端优化，不一定非得使用JavaScript（Node.js）基础的工具”。

很多像我一样的Python后端开发者，在面对前端优化任务时，可能会感到“哦，要搭建Node.js环境吗？我该用npm安装什么？”这样的负担。然而，这次实验表明，在如CSS Minification这样的文本处理优化任务中，语言或运行时间的性能差异可能微乎其微。

这明确传达的含义是。

  • 技术栈选择的自由：如果您是以Python后端为主的开发者，无需构建额外的Node.js环境，利用csscompressor等优秀的Python基础库，就能有效优化前端CSS。

  • 简化的开发工作流：不被复杂的webpack设置或npm脚本束缚，可以通过Python脚本或简单的Shell命令轻松地将CSS优化步骤集成到构建和部署流程中。这对小型项目或重视效率的团队来说，是一个很大的优势。

  • 集中关注本质：重要的不是“使用了什么工具”，而是“优化的效果如何”。此次实验成功将CSS文件大小减少了大约30%，因此在提升用户体验和改善网页服务性能的本质目标上，已充分实现。

当然，JavaScript生态系统的前端工具在功能上（打包、转译、树摇等）更加庞大和强大。然而，在像CSS Minification这样的特定优化任务中，利用熟悉的开发环境可能更加有效，这一点此次实验已明确显示。

在未来，我打算在我的Python基础网页服务中进行CSS Minification时，积极利用Python工具，而不增加不必要的Node.js依赖。

您呢？您是否也有类似的先入之见，对于这个实验结果又有什么想法呢？请在评论中分享您的看法！