一、背景
项目基于 webpack 构建产物，构建速度较慢。
开发、构建的耗时过长，影响前端幸福感。
二、脚手架-产物打包流程
- 初始化过程：将内置的命令（serve、build等注册在service上）
- 执行过程：根据用户调用的命令（例如npm run serve），读取用户的配置文件、项目内置的配置、环境变量文件等，合并并校验配置对象后将其传入内置的命令中（比如serve），然后调用bundler（打包器）
- bundle打包过程：这一过程复杂，可以看我另一篇文章作为前导。项目有个入口文件（index.tsx），然后index.tsx会引入别的文件，通过递归遍历，能形成一个依赖树。经过tree-shaking将没有用到的依赖节点去掉。对于树上的每个节点，我们需要将其转换成合适的形式才能处理（比如tsx需要转换成js，scss=>css等）。经过转换后，将整个树的所有节点整合到一个bundle.js文件中，然后混淆、压缩、代码分割等操作后，输出到output中。
整体流程如下 
而这一整个流程中，有很多节点能做优化，前端各大流行脚手架都会在其中的节点大展身手
三、现有的前端脚手架
以下构建器默认都有并行构建、缓存构建结果的功能
1. rollup
纯粹的 ESM 构建器，
优化点：esm 规范的代码有着颗粒度更细的依赖范围，这对于 tree-shaking 的成效有很大的提升
优势：
- 打包体积小
- 配置简单
缺点：
- 没有 hmr，所以作为开发构建器用途不大
- 对非 js 文件支持无
用途：适合打包库
2. webpack
前端项目构建器
优势：
- 生态成熟，插件众多
- 多数资源（js、css、静态资源等）能以模块解析
- 配置丰富
- 支持 hmr，适合做开发构建器
- 支持 tree-shaking
- 支持 commonjs、amd、esm 等多种规范
- 支持代码分割，chunk
缺点：
- 资源需要进行模块化处理，耗时
- 配置复杂
- 使用 nodejs 构建，对于大型项目构建耗时长
用途：前端构建工具
3. esbuild
新的纯粹的 esm 构建器
优化点：文件的打包、优化过程利用 go 及其并行的优势来执行
优势：
- go 作为底层代码，构建速度提升非常大
- 支持 esm 规范
缺点：
- 生态很新
用途：需要频繁构建的地方
4. vite
esbuild 作为开发构建器、rollup 作为打包构建器的前端构建器
优化点：将文件转换后交给浏览器执行，省去了打包、优化过程。
优势：
- 配置简单，开发体验非常好
- go 预构建依赖，源码转换成 esm 后交给浏览器编译
- 通过浏览器发起 http 请求 esm，可以配合浏览器缓存做优化
- go 压缩代码，非常快
缺点：
- 浏览器会同时发起多个请求，即便是用了 http2，也有点吃不消
- 目前依旧使用 rollup 作为打包构建器
用途：前端构建器
5. turbopack
基于用用最快的速度构建最少的产物
优化点：通过路由、是否开启开发者工具、缓存函数的返回结果等来减少构建的产物量，通过 rust 的并行来提升构建速度
优势：
- 配置简单，开发体验非常好
- rust + turbo engine 的方式做了非常多的优化
缺点：
- 对于生产环境，目前还没有根源性的优化，不过官网说 soon
- 理念强大，可行性非常高
四、脚手架实现方案
模板工具
- 制作固定模板：react17/18 + antd5
- 命令行提供框架、ui、包管理器选择
- 根据用户的选择命中对应的模板
脚手架
- 注册内置命令
- 获取默认配置、用户配置、环境变量
- 合并并校验配置
- 执行命令
- 调用vite起server服务，或者构建产物
vite 原理
ps
