这是我参与「第五届青训营 」伴学笔记创作活动的第 20 天
这篇笔记记录了Vite的概要、实战、进阶等知识体系
一、本堂课重点内容
- 浅谈构建工具
- Vite概要介绍
- Vite上手实战
- Vite整体架构
- Vite进阶路线
二、详细知识点介绍
1、构建工具存在的意义
- 前端工程的痛点
- 模块化：ESM、CommonJS、UMD
- 资源编译：高级语法的编译
- 产物质量：代码体积、代码性能
- 开发效率：热更新
- 前端构建工具的意义
- 模块化方案
- 提供模块加载方案
- 兼容不同模块规范
- 语法转译
- 高级语法转译
- 资源加载
- 产物质量
- 产物压缩
- 无用代码删除
- 语法降级
- 开发效率
- 热更新
- 模块化方案
2、Vite的概要介绍
- 定位：新一代前端构建工具
- 两大组成部分
- No-bundle 开发服务，源文件无需打包
- 生产环境基于Rollup的Bundler
- 核心特征
- 高性能，dev启动速度和热更新快
- 简单易用，开发者体验好
- 两大行业趋势
- 浏览器对原生ESM的普遍支持
- script标签增加
type="module"属性 - 使用ESM模块导入导出语法
- script标签增加
- Esbuild的使用
- 浏览器对原生ESM的普遍支持
- 基于原生ESM的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
- 基于Esbuild的编译性能优化
- Esbuild是一个基于Golang开发的前端工具，具备以下功能
- 打包器 Bundler
- 编译器 Transformer
- 压缩器 Minifier
- Esbuild是一个基于Golang开发的前端工具，具备以下功能
- 内置的Web构建能力
3、Vite实战
- 项目初始化
npm i -g pnpm
pnpm create vite
pnpm install
npm run dev
- 引入资源
- 使用HMR：无需额外配置，自动开启
- 生产环境Tree Shaking
4、Vite整体架构
- 关键技术
- 依赖预打包
- 避免node_modules过多的文件请求
- 将CommonJS格式转换为ESM格式
- 单文件编译
- 代码压缩
- 插件机制
- 依赖预打包
5、Vite进阶
- 了解Esbuild、Rollup基本使用，尝试各种配置，学习插件开发
- 插件机制
- 抽离核心逻辑
- 易于拓展
- 了解Vite社区生态
三、实践练习例子
- 无
四、课后个人总结
- 作为下一代的前端工具链，Vite具有良好的发展前景，因此有必要掌握Vite最基础的使用
