coolie 的内容压缩也是别具一格。

1<link/>

<!--page1.html-->
<!--coolie-->
<link href="path/to/module1.css">
<link href="path/to/module2.css">
<link href="path/to/module3.css">
<link href="path/to/module4.css">
<!--/coolie-->

page1.html 引用了 module1、module2、module3和module4四个样式模块，并且将这 4 个样式模块分为一组，表示将这个 4 个样式模块合并压缩（coolie 指令）。

coolie-cli 构建之后

<!--page1.html-->
<link href="/css/content_version.css">

content_version表示内容的版本（详见：版本管理策略），下同。

2<script/>

如你所见，<script/>的合并与<link/>一致。

<!--page1.html-->
<!--coolie-->
<script src="path/to/module1.js"></script>
<script src="path/to/module2.js"></script>
<script src="path/to/module3.js"></script>
<script src="path/to/module4.js"></script>
<!--/coolie-->

构建为

<!--page1.html-->
<script src="/js/content_version.js"></script>

3module

相比较而言，模块的内容压缩策略会复杂一些。主要步骤如下：

分析模块分块规则 => 分析入口模块 => 分析异步模块 => 模块构建
=> 分析模块依赖 => 分析模块类型 => 模块内容处理（js、css、image、html等处理）
=> 匹配分块模块 => 模块存储

模块的合并，按照一个模块一行代码的规则，逐行合并，最后保存。

define('0',['1','2'],function(){r('1');r('2')});
define('1',[],function(){});
define('2',[],function(){});

如上，3 行代码表示有 3 个模块共同合并在一起，非常的清晰明了。入口模块的 ID 固定为 0，其他的依赖模块根据三十六进制，进行全局计算，保证唯一。

原文: https://coolie.ydr.me/introduction/content-compression