构建工具

前端工程的痛点

• 模块化（ESM、CommonJS、UMD）
• 资源编译（高级语法的编译）
• 产物质量（代码体积、代码性能）
• 开发效率（热更新）

前端构建工具的意义

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

Vite概要介绍

Vite概览

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

Vite优势

• 解决当下构建工具的问题
  • 启动缓慢
  • 热更新缓慢
• 行业趋势
  • 浏览器对ESM支持
  • 基于原生语言编写前端编译工具链
• 浏览器原生ESM支持
• 基于原生ESM的开发服务优势
  • 无需打包项目源代码
  • 天然的按需加载
  • 可以利用文件级的浏览器缓存
• 基于Esbuild的编译性能优化
• 内置的Web构建能力

Vite实战

项目初始化

Vite架构

单文件编译

用Esbuild编译TS/JSX

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

代码压缩

Esbuild作为默认压缩工具

插件机制

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

Vite进阶路线

深入双引擎

• Esbuild
• Rollup.js 先了解基本使用，动手尝试各项常用配置，然后学习其插件开发。

插件机制

为什么使用插件机制

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

Vite 插件开发

语法安全降级

服务端渲染（SSR）

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

底层标准

总结

本节课介绍了前端构建工具相关知识，介绍了Vite工具的概况，优点，以及实战构建演示和Vite进阶内容