这是我参与「第五届青训营 」伴学笔记创作活动的第 6 天
构建工具
为什么需要构建工具:
- 模块化: 在ESM之前社区开发了各种JS模块化方式如CommonJS、UMD等
- 资源编译: Less/Sass编译等。
- 产物质量： tree shaking等
- 开发效率：HMR等
- 在依赖增加项目量增大后打包需要全量编译，带来性能开销。
- JS本身的性能瓶颈。
ESM出现，无需全量打包，可以利用文件级别的缓存。
<script type="module" src="/xx/xx.js"></script>
基于Go、rust等开发的工具链，如esbuild, swc等。
vite概要
Vite: dev模式下采用no-bundle开发服务 production模式下采用roll-up打包
vite提供了开箱即用的能力 html plugin、css loader，tree shaking等，且与框架无关，提供了vue、react项目等初始化功能。
commonJS格式无法做到tree shaking，因为require可能依赖运行时的计算结果。
Vite整体架构
- 开发环境: Native ESM based dev server。esbuild足够快，用于编译。
- 生产环境：打包，减少http请求时间，rollup更为成熟灵活。
- vite plugin
特性
依赖预打包：使用esbuild编译TS/JSX, 编译速度快，不支持类型检查不支持语法降级。 代码压缩：esbuild minify替换传统的uglify等。
css代码拆分：会将异步代码块中通过module加载的css提取至另一个文件，通过<link>在运行时导入。
Glob import：通过import.meta.glob同时引入多个模组。并且还支持在引入过程中使用类似正则表达式的方式进行模式匹配。
Dynamic import: 动态加载能力，const module = await import(./dir/${file}.js) 奇怪了，该怎么转义你？
部署至静态站点：vite官方提供了将打包出的文件部署至Github Pages、Gitlab Pages、Netlify等静态托管站点的脚本配置项。可以与CI/CD结合实现自动部署。
Vite进阶路线
- esbuild、rollup两个底层编译工具
- vite插件开发：抽离逻辑，易于拓展。通过hook在不同阶段插入自定义逻辑。
- 代码分割：并发请求，提高缓存命中率。
- SSR：优化首屏渲染和SEO优化。
- 深度底层标准
