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

重点

• Vite介绍 优缺点
• Vite上手实践
• Vite整体架构
• 进阶路线

Vite

构建工具

意义

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

vite概要介绍

新一代前端构建工具

两大组成

• no bundle开发服务 源文件无需打包
• 生产环境基于rollup的bundler

核心特征

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

两大行业趋势 全球浏览器对原生ESM的普遍支持92% 基于原生语言Go，Rist编写前端编译工具链，如Esbuild SWC

浏览器对原生ESM的普遍支持

两大要素

• scipt标签添加type=modeule属性
• 使用ESM模板导入导出语法

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

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

基于Esbuild的编译性能优化

Esbuild具有：打包器bundler 编译器transformer 压缩器minifier

性能极高 在vite中被深度使用

内置的web构建能力

vite上手实战

项目初始化

输入初始参数 启动后截图 启动后 打开浏览器访问对应地址即可

使用Sass/ Scss & CSS Modules

引入header

使用静态资源

使用HMR

自动开启

Tree-shaking

默认开启

vite整体架构

预打包

预打包原因

• 避免node_modules过多的文件请求
• 将CommonJS格式转换为ESM

实现原理

• 服务启动前扫描代码中用到的依赖
• 用Esbuild对依赖代码进行预打包
• 改写import语句 指定依赖为预构建产物路径

单文件编译

用Esbuild编译TS/JSX

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

代码压缩

插件机制

• 开发阶段：模拟rollup插件机制
• 生产环境：直接用rollup vite-rollup-plugins.patak.dev/

进阶路线

深入双引擎

rollupjs.org/guide/ vite-rollup-plugins.patak.dev/ 先了解基本应用 -》常用配置-》插件开发

插件开发

抽离核心逻辑，易于拓展

示例

cn.vitejs.dev/guide/api-p… github.com/vitejs/vite… github.com/vitejs/vite… github.com/vitejs/vite… 先看文档掌握钩子功能，然后多学习其他插件的实现 掌握套路

代码分割拆包

cn.vitejs.dev/config/buil… rollupjs.org/guide/en/#o…

JS编译工具Babel

使用原因

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

原理 babeljs.io/docs/en/ github.com/jamiebuilds…

语法安全降级

github.com/vitejs/vite… babeljs.io/docs/en/bab…

总结

讲了Vite实际应用和整体架构，以及进阶方向