前端工程化概述
平常我们都说的是框架，但是总会遇到不常见的框架，甚至某些古老的框架，我们需要对这些前端技术做一定对分类，以便与开发者理解手上代码的结构性概念。
# 渲染与部署
基于渲染的角度总结，我们可以发现有一下几类：
- SSG；
- SSR；
- CSR；
# SSG
部署时 通过模版+数据，预先生成静态 html 文件，然后把静态资源完整的放置在服务端
访问时 客户端访问的是静态页面
特点：
- 不适合有复杂交互的页面
- 当数据变化时需要重新部署，数据量较大时，处理性能很差（性能问题解决：增量部署）
- 完美支持SEO
- 无需服务端 速度极快
- 使用 github page 等服务时，可以不需要服务器就可以建立网站
常见框架：hexo、vuepress等
# SSR
部署时 编译服务端逻辑+模版，然后把服务端放在服务器上
访问时 客户端访问服务器，服务器实时获取数据并编译，然后把生成的 html 发送给客户端
特点：
- 速度取决于服务端性能、带宽、并发的处理，例如 node服务 会明显慢于传统语言的服务（java等）
- 数据变化时，无需编译部署，单需要单独维护服务端
- 服务端使用的模版语法可能于前端的模版有差异，需要注意可能混淆
- 完美支持SEO
常见框架：egg.js（更像传统语言）、next.js（react）、nust.js（vue）、astro（新的框架）等，这些都是 node 下的服务端 还有传统语言提供服务端，具体就不列举了
# CSR
部署时 生成编译后的文件，其中的html部分一般只会有很少的dom，具体渲染部分由js来操作
访问时 客户端下载资源，其中js在客户端来渲染DOM
特点：
- 无需服务端
- 渲染性能会差（虽然各个框架发现飞速，但是渲染性能或多或少会慢于静态html文件）
- 很难支持动态的SEO
- 各个框架的优点百花齐放，但是一般都有双向绑定
常见框架：VUE、react、svelte等，平常我们使用的就是这些框架
# 工程化工具
工具的还是比较多的，从原来的grunt、gulp，到现在的webpack、vite等...
# 编译工具类
例如：grunt gulp。
grunt比较老了，所以这里只说下gulp。
gulp实际上就是一堆任务的集合（例如：压缩代码，代码降级，代码检查，代码编译，上传oss，加密等），通过对文件执行自定的任务，来生成最后的可以部署的代码。
这个类工具对代码内部的逻辑没有任何概念，所以逻辑性的无法处理，功能就是不同的任务组合，对工程化有一点帮助，但没有那么紧密
# 打包工具类
也就是为了解决编译工具无法解决的逻辑性的依赖关系，出现了webpack。
webpack 通过入口来一层层倒入依赖，并且对不同的依赖进行对应的处理。相比编译工具，优势在于：
- 知道了代码的依赖、引用的关系，可以相对的优化代码（不会打包未引用的代码）
- 可以把模块拆分到不同的chunk里，就是可以生成可控制的代码
- 可以实现 tree sharking、code spliting、引用的lazyload等功能
这样的打包工具有着明显的优点，但是也有一些缺点：模块多了后，打包就会很慢
所以后面出现了 no bundle 的实现， 例如 vite
no bundle 是在开发环境避免打包的操作，开发时速度会好一些，但是部署之后的性能差不多，而且如果优化没做好，体感的访问速度会差一些
# 集成很多项目的工程
在很大的公司里会遇到这种问题，但是大部分情况都用不到
如果遇到或有需要，需要去了解下 monorepo（跨项目合作） / 微前端（qiankun.js）