这是我参与「第五届青训营 」伴学笔记创作活动的第 14 天 今日学习重点：了解什么是Vite，Vite上手实战，Vite整体架构，Vite进阶路线。 为什么要使用构建工具： 把资源打包进行模块化 进行资源整合 提高产物质量 加快开发速度
前端构建工具的意义：
模块化方案
- 提供模块加载方案
- 兼容不同模块规范
语法转译
- 高级语法转译（Sass，Typescript）
- 资源加载（图片，字体，worker）
产物质量
- 产物压缩，无用代码删除，语法降级
开发效率
- 热更新
Vite是什么
Vite被定位为新一代前端构建工具
Vite有什么组成：
- No-bundle开发服务，源文件无需打包
- 生产环境基于Rollup的Bundle
Vite核心特征
- 高性能，dev启动速度和热更新速度非常快
- 简单易用，开发者体验好
浏览器原生ESM支持2大要素
- script标签增加type="module"属性
- 使用ESM模块导出语法
基于原生ESM的开发服务优势
- 无需打包项目源代码
- 天然的按需增加
- 可以利用文件级的浏览器缓存
Vite项目初始化
- 需要提前安装pnpm npm i -g pnpm
- 初始化命令pnpm create vite
- 安装依赖pnpm install
- 启动项目npm run dev
- 安装SASSpnpm i Sass
为什么要进行依赖预打包
- 避免node_modules过多的文件请求
- 将CommonJS格式转换为ESM格式
预打包实现原理
- 服务启动前扫码代码中用到的依赖
- 用Esbulid对依赖代码进行预打包
- 改写import语句，指定依赖为预构建产物路径
Vite插件开发四个阶段
- 服务启动阶段
- 请求响应阶段
- 热更新阶段
- 服务关闭阶段
Vite 插件扩展了设计出色的 Rollup 接口，带有一些 Vite 独有的配置项。因此，你只需要编写一个 Vite 插件，就可以同时为开发环境和生产环境工作。
总结：将来作为一个资深的前端工程师，就要学习很多的工具来整合开发资源，优化代码，提升开发效率，所以学习Vite是我们提升代码的一个好方法。
