前端与 Vite| 青训营笔记

这是我参与「第五届青训营 」笔记创作活动的第九天

一、重点内容

• 前端构建工具的意义
• Vite 概览
• Vite 优势
• 项目初始化
• 使用 Sass/Scss & CSS Modules
• 使用静态资源
• 生产环境 Tree Shaking
• 深入双引擎
• Vite 插件开发
• 代码分割(拆包)
• JS 编译工具(Babel)
• 语法安全降级
• 服务端渲染(SSR)
• 深入了解底层标准
• Vite 社区生态

二、详细内容

1、构建工具

核心--资源

意义

2、Vite

定位: 新一代前端构建工具

两大组成部分：

1. No-bundle 开发服务，源文件无需打包
2. 生产环境基于 Rollup 的 Bundler

核心特征：

1. 高性能，dev 启动速度和热更新速度非常快!
2. 简单易用，开发者体验好

ESM

两大要素

1. script 标签增加 type="module"属性
2. 使用 ESM 模块导入导出语法

优势

1. 无需打包项目源代码
2. 天然的按需加载
3. 可以利用文件级的浏览器缓存

基于 Esbuild 的编译性能优化

1. 打包器 Bundler
2. 编译器 Transformer
3. 压缩器 Minifier

性能极高，在 Vite 中被深度使用

3、Vite上手使用

1、初始化

2、使用 Sass/Scss & CSS Modules

3、使用 Scss & CSS Modules

4、 使用静态资源

5、使用HMR

6、生产环境 Tree Shaking

• 基于 ESM 的 import/export 语句依赖关系，与运行时状态无关
• 在构建阶段将未使用到的代码进行删除

4、Vite整体架构

关键技术

依赖预打包

• 服务启动前扫描代码中用到的依赖
• 用 Esbuild 对依赖代码进行预打包
• 改写 import 语句，指定依赖为预构建产物路径

单文件编译

• 优势: 编译速度提升 10-100 x
• 局限性:1、不支持类型检查 2、不支持语法降级到 ES5

代码压缩

插件技术

• 开发阶段 -> 模拟Rollup 插件机制
• 生产环境 -> 直接使用Rollup

5、Vite进阶

• 深入双引擎

• Vite插件开发

• 代码分割

• 语法安全降级

• SSR

• 了解底层标准

• Vite社区生态

三、课后总结

1、vite前端开发与构建工具 2、vite整体架构 3、学到vite整体知识