这是我参与「第五届青训营」伴学笔记创作活动的第16天
一、浅谈构建工具
前端工程的痛点
- 模块化
- 资源编译
- 产物质量
- 开发效率
前端构建工具的意义
- 模块化方案
- 提供统一模块加载方案
- 兼容不同模块规范
- 语法转译
- 高级语法转译，如：Sass、TypeScript
- 资源加载，如：图片、字体、worker
- 产物质量
- 产物压缩、删除无用代码、语法降级
- 开发效率
- 热更新
二、Vite概要介绍
- 定位：新一代前端构建工具
- 两大组成部分
- No-bundle开发服务，源文件无需打包
- 生产环境基于Rollup的Bundler
- 核心特征
- 高性能，dev启动速度和热更新速度非常快
- 简单易用，开发者体验好
- 当下问题
- 缓慢的启动->项目编译等待成本高
- 缓慢的热更新->修改代码后不能实时更新
- 基于原生ESM的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
- 基于Esbuild的编译性能优化
- Esbuild——基于Golang开发的前端工具，具备以下能力：
- 打包器Bundler
- 编译器Transformer
- 压缩器Minifier
三、Vite整体架构
1.依赖预打包
- 为什么要进行预打包？
- 避免node_modules过多的文件请求
- 将CommonJS格式转换为ESM格式
- 实现原理
- 服务启动前扫描代码中用到的依赖
- 用Esbuild对依赖代码进行预打包
- 改写import语句，指定依赖为预构建产物路径
2.单文件编译
用Esbuild编译TS/JSX
- 优势：编译速度提升10-100x
- 局限性：不支持类型检查、不支持语法降级到ESS
3.插件机制
- 开发阶段-> 模拟Rollup插件机制
- 生产环境-> 直接使用Rollup
四、Vite进阶路线
- 为什么需要插件机制
- 抽离核心逻辑
- 易于拓展
五、课后总结
本章节学习了Vite的相关知识，从前端架构工具、Vite定义、实操、整体架构、插件机制等方面深入了解Vite知识体系，和Weboack一样，Vite也是前端工程化的构建工具之一，简单易用、性能高，开发者体验好。
