我的书签
添加书签
移除书签Q：一句话解释为什么要前端构建？A：因为前端资源都存放在远程服务器上。
1构建哪些资源
- JS 内容（包括
<script/>直接引入的 JS 和 JS 模块）：压缩、合并、版本管理。 - CSS 内容（包括
<link/>直接引入的 CSS 和 JS 模块引入的 CSS 模块）：压缩、合并、版本管理。 - HTML 内容（包括 HTML 模板文件和 JS 模块引入的 HTML 模块）：压缩。
- 资源文件（如 CSS 引用的图片、字体等，JS 模块引用的图片等，以及 HTML 文件里资源标签（如
<img/>、<video/>等）引用的图片等）：压缩、版本管理、替换源引用。
2如何构建
目前，coolie-cli 按照以下六个步骤来进行。
2.1分析配置文件
coolie-cli 会分析指定目录下的coolie.config.js（默认）配置文件。分析出哪些 HTML 需要构建，哪些入口模块需要构建，以及 JS、CSS、资源文件的存放目录等等。配置文件基本是与工程的大小无关的，因为路径是支持 glob 格式的。
2.2复制文件
重写原样复制一些不需要构建的文件（可配置），如 robots.txt、favicon.ico 等。
2.3构建入口文件
分析入口模块，以及异步模块，然后依次分析各个需要构建的模块以及依赖模块，缓存在内存内。在遇到 html、css、image 模块，则需要进行额外处理，经过模块管道处理，生成目标模块。最后按照分块规则，将分析后的模块进行依次分块保存。
2.4重写 coolie-config.js
写入配置的文件主要是异步模块和分块模块的版本号，因为异步模块和分块模块都是用 ID 来表示的。
2.5构建 html
接下来就是构建 html，依次分析 html 里的资源标签和合并标记（即：coolie 指令），找出引用资源，然后进行压缩、合并、版本管理，并且替换在 html 里的引用路径。
2.6生成 coolie-map.json
根据以上五步，构建工具已经静态分析出整个工程引用了哪些资源，以及资源之前的裙带关系（依赖关系）。
构建不仅仅是一个优化过程，更是一个静态检查过程，可以帮我们发现引用了哪些坏链的资源。
