这是我参与「第五届青训营 」伴学笔记创作活动的第 14 天
一、本堂课重点内容:
- 构建工具的意义
- Vite 概览介绍
- Vite 上手实战
- Vite 整体架构
- Vite 进阶路线
二、详细知识点介绍:
2.1 构建工具的意义
-
模块化: 在ESM之前社区开发了各种JS模块化方式如CommonJS、UMD等
-
资源编译: Less/Sass编译等。
-
产物质量： tree shaking等
-
开发效率：HMR等
2.2 Vite 概览介绍
定位:新一代前端构建工具 两大组成部分: 1.No-bundle开发服务，源文件无需打包 2.生产环境基于Rollup的 Bundler
核心特征 1.高性能,dev启动速度和热更新速度非常快! 2.简单易用,开发者体验好
2.2.1 浏览器原生ESM支持
两大要素:
1.script标签增加type="module”属性 2.使用ESM模块导入导出语法
2.2.2 基于原生ESM的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓
2.2.3 基于Esbuild编译性能优化
Esbuild ——基于Golang开发的前端工具,具备如下能力:
1.打包器 Bundler
2. 编译器Transformer
3.压缩器Minifier
性能极高,在Vite中被深度使用
2.3 Vite上手使用
生产环境Tree Shaking
优化原理: 1.基于ESM的import/export语句依赖关系，与运行时状态无关 2.在构建阶段将未使用到的代码进行删除
Tree Shaking 在vite中无需配置，默认开启
2.4 vite架构
依赖预打包
为什么要进行预打包? 1.避免node_modules过多的文件请求 2.将CommonJS格式转换为ESM格式
实现原理: 1.服务启动前扫描代码中用到的依赖 2.用Esbuild对依赖代码进行预打包 3.改写import语句，指定依赖为预构建产物路径
关键技术:单文件编译
用Esbuild 编译TS/JSX
优势:编译速度提升10-100x
局限性：
- 不支持类型检查
- 不支持语法降级到ES5
关键技术：插件机制
开发阶段->模拟 Rollup 插件机制
生产环境->直接使用Rollup
2.5 Vite进阶
- esbuild、rollup两个底层编译工具
- vite插件开发：抽离逻辑，易于拓展。通过hook在不同阶段插入自定义逻辑。
- 代码分割：并发请求，提高缓存命中率。
- SSR：优化首屏渲染和SEO优化。
- 深度底层标准
- 底层工具
三、引用参考：
- 青训营ppt
