这是我参与「第五届青训营 」笔记创作活动的第12天。
课堂重点
- 浅谈构建工具
- Vite 概要介绍
- Vite 上手实战
- Vite 整体架构
- Vite 进阶路线
详细内容
浅谈构建工具
为什么需要构建工具
存在问题 —— 前端工程的痛点
- 模块化：把项目拆分为不同部分，分而治之，目前没有统一规范（常用规范ESM、CommonJS、UMD）
- 资源编译：浏览器并不认识高级语法，需要将高级语法（es6、ts，jsx、scss）编译成浏览器可识别的形式。
- 产物质量：代码体积、代码性能、兼容性问题
- 开发效率：热更新
构建工具的意义
- 模块化方案：1. 提供模块加载方案；2. 兼容不同模块规范
- 语法转译：1. 高级语法转译；2. 资源加载
- 产物质量：产物压缩、无用代码删除、语法降级
- 开发效率：热更新
Vite 概览
新一代前端构建工具，具有高性能，简单易用的特性。
案例
Vite优势分析
当下问题
bundle 带来的性能开销
js 语言的性能瓶颈
两大行业趋势
浏览器原生 ESM 支持
基于原生 ESM 的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
基于 Esbuild 的编译性能优化
Esbuild
- 打包器 Bundler
- 编译器 Transformer
- 压缩器 Minifier
内置的 Web 构建能力
Vite 使用
项目初始化
使用 Sass/Scss & CSS Modules
使用静态资源
使用 HMR
无需额外配置，自动开启
生产环境 Tree Shaking
无需配置，默认开启
vite 给人最直观的印象如何？
- 响应迅速
- 开箱即用
