这是我参与「第四届青训营 」笔记创作活动的第13天
为什么需要构建工具
前端工程师痛点
前端构建工具的意义
- 模块化：提供模块加载方案，兼容不同模块规范
- 语法转译：高级语法转译，若sass、typescript，资源加载，如图片、字体、worker
- 产物质量：产物压缩、无用代码删除、语法降级
- 开发效率：热更新
Vite 是什么
定位：新一代前端构建工具
两大组成部分：
- No-bundle 开发服务，源文件无需打包
- 生产环境基于Rollup的Bundler B
核心特征：
- 高性能，dev启动速度和热更新速度非常快！
- 简单易用，开发者体验好
案例：
当下存在的问题
-
缓慢的启动 -》 项目编译等待成本高
-
缓慢的热更新 -》 修改代码后不能实时更新
瓶颈:
- bundle带来的性能开销
- JavaScript语言的性能瓶颈
两大行业趋势
- 全球游览器对原生ESM的普遍支持
- 基于原生语言（Go、Rust）编写前端编译工具链，如Go语言编写的Esbuild、Rust编写的SWC
基于原生ESM的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级游览器缓存
内置的Web构建能力
vite上手使用
项目初始化
使用Sass/Scss & CSS Modules
使用静态资源
使用HRM
vite的直观映像
- 响应迅速
- 开箱即用
