Vite 知识体系 | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 14 天

一、Vite基本概要

1.前端工程的痛点

• 模块化

  • ESM、CommonJS、UMD

• 资源编译

  • 高级语法的编译

• 产物质量

  • 代码体积、代码性能

• 开发效率

  • 热更新

2.前端构建工具的意义

• 模块化方案

  1. 提供模块加载方案
  2. 兼容不同模块规范

• 语法转译

  1. 高级语法转译，如Sass、TypeScript
  2. 资源加载，如图片、字体、worker

• 产物质量

  1. 产物压缩、无用代码删除、语法降级

• 开发效率

  1. 热更新

3.Vite概要

• 定位：新一代前端构建工具

• 两大组成部分：

  1. No-bundle开发服务，源文件无需打包
  2. 生产环境基于Rollup的Bundler

• 核心特征

  1. 高性能，dev启动速度和热更新速度非常快！
  2. 简单易用，开发者体验好

4.浏览器原生ESM支持

1. script标签增加type="module"属性
2. 使用ESM模块导入导出语法

优势

1. 无需打包项目源代码
2. 天然的按需加载
3. 可以利用文件级的浏览器缓存

二、Vite 上手实战与架构解析

1.项目初始化

1. 安装pnpm

npm i -g pnpm

2. 初始化命令

pnpm create vite

3. 安装依赖

pnpm install

4. 启动项目

npm run dev

2.生产环境Tree Shaking

• 基于ESM的import/export语句依赖关系，与运行时状态无关
• 在构建阶段将未使用到的代码进行删除

3.Vite最直观的印象

• 响应迅速
• 开箱即用

4.Vite整体架构

5.单文件编译

优势：编译速度提升10-100×局限性：

• 不支持类型检查
• 不支持语法降级到ES5

6.插件机制

• 开发阶段->模拟Rollup插件机制
• 生产环境->直接使用Rollup

三、Vite 进阶路线

1.为什么需要插件机制

• 抽离核心逻辑
• 易于拓展

2.Vite插件开发

1. 服务启动阶段

2. 请求响应阶段

3. 热更新阶段

4. 服务关闭阶段

3.参考资料

Vite插件开发文档

• 复杂度较低的插件：json加载插件
• 复杂度中等的插件：Esbuild接入插件
• 复杂度较高的插件：官方React:插件

4.JS编译工具(Babel)

• JavaScript语法标准繁多，浏览器支持程度不一
• 开发者需要用到高级语法

5.语法安全降级

如何在构建产物中避免这类问题？

• 上层解决方案：@vitejs/plugin-legacy

• 底层原理

  • 借助Babel进行语法自动降级
  • 提前注入Polyfill实现，如core-js、regenerator-runtime

6.Vite社区生态

官方插件

• @vitejs/plugin-vue,提供Vue3支持
• @vitejs/plugin-vue-jsx,提供Vue3JSX支持
• @vitejs/plugin-react,提供React支持
• @vitejs/plugin-legacy,提供低版本浏览器降级支持