这是我参与「第五届青训营 」笔记创作活动的第16天
一、本堂课重点内容：
- 1.前端工程的痛点
- 2.前端构建工具的意义
- 3.Vite概览
- 4.Vite业界案例
- 5.Vite优势
二、详细知识点介绍：
- 前端工程的痛点
前端工程的核心要素就是资源。
- 模块化：将项目拆成不同的部分，然后分而治之，虽然有了一些关于前端模块化的规范比如ESM、CommonJS、UMD，但是前端的规范还是没有形成统一，所以在前端工程化中仍然是一个问题。
- 资源编译：浏览器的标准赶不上前端开发者的脑洞，前端开发者开发出了许多前端体验，但是浏览器不支持
- 产物质量：代码体积、代码性能、兼容性。
- 开发效率
- 2.前端构建工具的意义
模块化方案-->提供模块加载方案和兼容不同模块规范
语法转译--> 高级语法转译，如Sass、TypeScript；资源加载，如图片、字体、worker
产物质量-->产物压缩、无用代码删除、语法降级
开发效率-->热更新
-
- 3.Vite概览 Vite的定位是新一代前端构建工具。
Vite主要由两大部分组成，如下图所示 -
4.Vite业界案例
从上图可以看到，在使用Vite后，启动时间从原来的两分多钟变成了短短1.7秒，更新时间从原来的23秒变成了1秒以内。
当下问题:
- 缓慢的启动 -> 项目编译等待成本高
- 缓慢的热更新 -> 修改代码后不能实时更新
那技术瓶颈在哪里呢？
- bundle带来的性能开销
- JavaScript语言的性能瓶颈
两大行业趋势
- 全球浏览器对元素ESM的普遍支持（目前占比92%以上）
- 基于原生语言（GO、Rust）编写前端编译工具链，如Go语言编写的Esbuild、Rust编写的SWC
