这是我参与「第五届青训营 」笔记创作活动的第11天
一、本堂课重点内容：
前端构建工具、Vite概要介绍、Vite上手实战、Vite整体架构、Vite讲阶路线。
二、详细知识点介绍：
1.为什么需要构建工具?
- 模块化方案-提供模块加载方案；兼容不同模块规范。
- 语法转译-高级语法转译，如Sass、TypeScript；资源加载，如图片、字体、worker。
- 产物质量-产物压缩、无用代码删除；语法降级。
- 开发效率-热更新。
2.Vite是什么?
- 定位:新一代前端构建工具。
- 两大组成部分:
- No- bundle开发服务，源文件无需打包
- 生产环境基于Rollup的Bundler
- 核心特征
- 高性能，dev启动速度和热更新速度非常快!
- 简单易用，开发者体验好
3.Vite.上手使用
- 安装pnpm：
npm i -g pnpm - 初始化：
pnpm create vite - 安装依赖
pnpm install - 启动项目
pnpm run dev
4.Vite整体架构
依赖预打包
- 为什么要进行预打包?
- 避免node_ modules过多的文件请求
- 将CommonJS格式转换为ESM格式
- 实现原理:
- 服务启动前扫描代码中用到的依赖.
- 用Esbuild对依赖代码进行预打包
- 改写import语句，指定依赖为预构建产物路径
单文件编译
用Esbuild编译TS/JSX
- 优势:编译速度提升10-100 x
- 局限性:
- 回不支持类型检查
- 间不支持语法降级到ES5
三、课后个人总结：
通过对本次课程的学习让我简单的了解了一下Vite，首先让我知道了Vite和webpack一样也是构建工具，然后vite是新一代的构建工具，然后让我了解了vite的一些核心特点：高性能、简单易用、开发者体验好，并且知道了vite的简单使用技巧，其后又让我知道了vite的依赖预打包和单文件编译，这让我对vite有了初步的了解。
四、引用参考：
掘金字节内部课程-Vite知识体系
