这是我参与「第四届青训营 」笔记创作活动的第10天
Vite知识体系
为什么需要构建工具
模块化
- 提供模块加载方案
- 兼容不同模块规范
资源编译
- 高级语法转译
- 资源加载
产物质量
产物压缩、无用代码删除、语法降级
开发效率
热更新
Vite是什么呢
当下的问题
- 缓慢的启动
- 缓慢的热更新
行业优势
浏览器原生ESM支持
基于原生ESM的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
基于Esbuild的编译性能优化
内置的Web构建能力
Vite上手使用
Vite给你最直观的印象如何？
- 响应迅速
- 开箱即用
Vite整体架构
关键技术：依赖打包
为什么要进行预打包？
- 避免node_modules过多的文件请求
- 将CommonJs格式转换为ESM格式
实现原理：
- 服务启动前扫描代码中用到的依赖
- 用Esbuild对依赖代码进行预打包
- 改写import语句，指定依赖为预购建产物路径
关键技术：单文件编译
用Esbuild编译Ts、jsx
优势：编译速度提升10-100x
局限性：
不支持类型检查
不支持语法降到ES5
代码压缩
Esbuild作为默认压缩工具，替换传统的Terser、Uglify.js等压缩工具
插件机制
开发阶段 -》模拟Rollup插件机制
生产环境 -》直接使用Rollup
Vite进阶路线
深入双引擎
esbuild、rollup.js
- 可以先了解基本使用，动手尝试各项常用配置
- 然后学习其插件开发
为什么需要插件机制
- 抽离核心逻辑
- 易于扩展
代码分割(拆包)
js编译工具(Babel)
语法安全降级
服务端渲染
深入了解底层标准
重点特效：
CJS规范
ESM规范
HTTP2.0特效
