这是我参与「第五届青训营 」笔记创作活动的第17天
本堂课重点内容
- 构建工具的意义
- Vite 概览介绍
- Vite 上手实战
- Vite 整体架构
- Vite 进阶路线
重点知识点介绍
为什么需要构建工具
前端工程的痛点
- 模块化：ESM、CommonJS、UMD
- 资源编译：高级语法的编译
- 产物质量：代码体积、代码性能
- 开发效率：热更新
前端构建工具的意义
- 模块化方案
- 提供模块加载方案
- 兼容不同模块规范
- 语法转译
- 高级语法转译，如Sass、TypeScript
- 资源加载，如图片、字体、worker
- 产物质量
- 产物压缩、无用代码删除、语法降级
- 开发效率
- 热更新
Vite介绍
-
定位：新一代前端构建工具
-
两大部分组成：
- No-bundle开发服务，源文件无需打包
- 生产环境基于Rollup的Bundler
-
核心特征：
- 高性能，dev启动速度和热更新速度非常快
- 简单易用，开发者体验好
-
其他打包工具：
- 当下问题
- 缓慢的启动->项目编译等待成本高
- 缓慢的热更新->修改代码后不能实时更新
- 瓶颈
- bundle带来的性能开销
- JS语言的性能瓶颈
- 当下问题
-
两大行业趋势
- 浏览器对原生ESM的普遍支持
- Esbuild的使用
-
基于原生ESM的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
-
基于Esbuild的编译性能优化 Esbuild是一个基于Golang开发的前端工具，具备如下能力
- 打包器 Bundler
- 编译器 Transformer
- 压缩器 Minifier
-
内置的Web构建能力
涵盖webpack和各种loader，plugin的功能
Vite整体架构
关键技术
- 依赖预打包
- 为什么要进行预打包
- 避免node_modules过多的文件请求
- 将CommonJS格式转换为ESM格式
- 实现原理
- 服务启动前扫描代码中用到的依赖
- 用Esbuild对依赖代码进行预打包
- 改写import语句，制定依赖为预构建产物路径
- 为什么要进行预打包
- 单文件编译
- 优势：编译速度提升数十倍
- 局限性
- 不支持类型检查
- 不支持语法降级到ES5
- 代码压缩
- 使用Esbuild作为默认压缩工具，代替传统的Terser、Uglify.js登压缩工具
- 插件机制
- 开发阶段->模拟Rollup插件机制
- 生产环境->直接使用Rollup
