内容压缩策略

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 引用了 module1module2module3module4四个样式模块, 并且将这 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,其他的依赖模块根据三十六进制,进行全局计算,保证唯一。