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

根据以上五步,构建工具已经静态分析出整个工程引用了哪些资源,以及资源之前的裙带关系(依赖关系)。

构建不仅仅是一个优化过程,更是一个静态检查过程,可以帮我们发现引用了哪些坏链的资源。

原文: https://coolie.ydr.me/introduction/front-end-build