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

Vite 基本概要

前端项目就是由一系列文件资源来组成的，这些资源可以是逻辑代码（JS、TS、JSX），也可以是 样式代码（CSS、SCSS、LESS），还可以是静态资源（PNG、JPEG、WEBP）。

前端工程的痛点

• 模块化

  • 把项目拆分成不同的模块，分别进行开发和维护
  • 没有统一规范，如ESM、CommonJS、UMD

• 资源编译

  • 高级语法的编译，浏览器不认识，需要编译成浏览器可识别的

• 产物质量

  • 线上代码需要压缩、未使用的模块需要从构建产物中剔除，来优化产物体积
  • 需要兼容到低端浏览器

• 开发效率

  • 代码改动后，想要立刻看到最新页面效果，如果没有构建工具来做，开发效率的提升是无法完成的。

前端构建工具的意义

• 模块化方案

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

• 语法转译

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

• 产物质量
  产物压缩、无用代码删除、语法降级

• 开发效率
  热更新

Vite 概览

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

• 两大组成部分

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

• 核心特点

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

传统构建工具的问题

PARCEL、webpack、browserify、rollup
缓慢的启动 → 项目编译等待成本高
缓慢的热更新 → 修改代码后不能实时更新

前端技术瓶颈在哪

⚠️bundle 带来的性能开销
⚠️JavaScript 语言的性能瓶颈

基于原生 ESM 的开发服务优势

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

Vite 上手实战与架构解析

生产环境 Tree Shaking

优化原理：

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

Tree Shaking 在 Vite 中无需配置，默认开启