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

前端工程的痛点

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

前端构建工具的意义

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

Vite是什么

新一代前端构建工具

两大组成部分：

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

核心特征：

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

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

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

项目初始化

• 安装pnpm：npm i -g pnpm
• 初始化命令：pnpm create vite
• 安装依赖：pnpm install
• 启动项目：npm run dev
• 生产环境 Tree Shaking

优化原理：

• 基于ESM的import/export语句依赖关系，与运行时状态无关
• 在构建阶段将未使用到的代码进行删除 注：
• HMR和Tree Shaking在vite中无需配置，默认开启
• CommonJS格式不能做到Tree Shaking
• require的部分可能依赖运行时计算的结果

关键技术

单文件编译

用Esbuild编译ts/jsx

优势： 编译速度提升10-100x

局限性： 不支持类型检查 不支持语法降级到es5

代码压缩

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

插件机制

开发阶段： 模拟Rollup插件机制（Plugin Container）

生产环境： 直接使用Rollup

Vite进阶路线

深入双引擎

esbuild和rollup

学习顺序：

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