这是我参与「第五届青训营 」伴学笔记创作活动的第 14 天
课程介绍
- 在正式讲解 Vite 之前，讲师将前置介绍有关前端工程基本知识，同时讲解前端构建工具及解决问题，进而引出作为前端构建工具的 Vite 是什么及其在开发过程中的应用。
- 本节课为 Vite 的实战环节，通过实际的命令行及编码操作，带领同学们逐步搭建起一个相对完整的脚手架，体验 Vite 各种内置功能，在实战环节后，本节课还将更进一步讲解 Vite 的整体架构，带领大家了解底层的实践原理。
- 在基本的原理及实践讲解完成后，讲师将在本节课中进一步介绍 Vite 的生态及进阶工程路线，带大家梳理前端架构领域中更为深层次的学习领域，帮助大家在日常生活中也能做到有的放矢地学习。
课程重点
- 前端工程的痛点
- 前端构建工具的意义
- Vite 概览
- Vite 业界案例
- Vite 优势
- 项目初始化
- 使用 Sass/Scss & CSS Modules
- 使用静态资源
- 生产环境 Tree Shaking
- 深入双引擎
- Vite 插件开发
- 代码分割(拆包)
- JS 编译工具(Babel)
- 语法安全降级
- 服务端渲染(SSR)
- 深入了解底层标准
- Vite 社区生态
为什么需要构建工具？
前端工程的痛点
- 模块化
- ESM、CommonJS、UMD
- 资源编译
- 高级语法的编译
- 产物质量
- 代码体积、代码性能
- 开发效率
- 热更新
前端构建工具的意义
- 模块化方案
- 提供模块加载方案
- 兼容不同模块方案
- 语法转译
- 高级语法转译，如Sass、TypeScript
- 资源加载，如图片、字体、worker
- 产物质量
- 产物压缩、无用代码删除、语法降级
- 开发效率
- 热更新
Vite 是什么？为什么 Vite？
Vite概览
- 定位：新一代前端构建工具
- 两大部分组成：
- No-bundle开发服务，源文件无需打包
- 生产环境基于Rollup的Bundler
- 核心特征：
- 高性能，dev启动速度和热更新速度非常快
- 简单易用，开发者体验好
业界案例
当下问题
- 缓慢的启动->项目编译等待成本高
- 缓慢的热更新->修改代码后不能实时更新
两大行业趋势
全球浏览器对原生ESM的普遍支持（目前占比92%）
基于原生语言（Go、Rust）编写前端编译工具链
如Go语言编写的Esbuild、Rust编写的SWC
浏览器原生ESM支持
基于原生ESM的开发服务趋势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
基于Esbuild的编译性能优化
Esbuild----基于Golang开发的前端工具，具备如下能力：
- 打包器Bundler
- 编译器Transformer
- 压缩器Minifier
内置的Web构建能力
Vite上手使用
项目初始化
使用静态资源
生产环境Tree Shaking
Vite整体框架
Vite进阶路线
Vite插件开发
深入了解底层标准
引用参考
字节青训营第十四节课Vite知识体系
