这是我参与「第四届青训营 」笔记创作活动的的第16天，今天的课程是「Vite 知识体系」，老师主要讲解了 为什么需要构建工具 、 Vite整体架构 、 Vite进阶路线 等内容。

为什么需要构建工具

前端构建工具的意义

• 模块化方案
  • 提供模块加载方案
  • 兼容不同模块方案
• 语法转译
  • 高级语法转译，如Sass、TypeScript
  • 资源加载，如图片、字体、worker
• 产物质量
  • 产物压缩、无用代码删除、语法降级
• 开发效率
  • 热更新

Vite

• 定位：新一代前端工具
• 两大组成部分：
  • No-bundle开发服务，源文件无需打包
  • 生产环境基于Rollup的Bundler
• 核心特征
  • 高性能，dev启动速度和热更新速度非常快
  • 简单易用，开发者体验好

项目初始化

#提前安装pnpm
npm i -g pnpm
#初始化命令
pnpm create vite
#安装依赖
pnpm install
#启动项目
npm run dev

Vite整体架构

关键技术：依赖预打包

• 为什么要进行预打包
  • 避免node_modules过多的文件请求
  • 将CommonJS格式转为ESM格式
• 实现原理
  • 服务启动前扫描代码中用到的依赖
  • 用Esbuild对依赖代码进行预打包
  • 改写import语句，指定依赖为预构建产物路径

关键技术：单文件编译

用Esbuild编译TS/JSX

• 优势：编译速度提升
• 局限性
  • 不支持类型检查
  • 不支持语法降级到ES5

关键技术：代码压缩

Esbuild作为默认压缩工具，替换传统的Terser、Uglify.js等压缩工具

Vite进阶路线

Vite插件开发

为什么需要插件差距？

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

JS编译工具

Babel出现的原因：

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

语法安全降级

• 上层解决方案：@vitejs/plugin-legacy
• 底层原理：
  • 借助Babel进行语法自动降级
  • 提前注入Polyfill实现，如core-js、regenerator-runtime

服务端渲染（SSR）

一种常见的渲染模式，用于提升首屏性能和SEO优化。