这是我参与「第四届青训营 」笔记创作活动的第13天
01浅谈构建工具
前端工程的痛点
- 模块化ESM、CommonJS、UMD
- 资源编译高级语法的编译
- 产物质量代码体积、代码性能
- 开发效率热更新
前端构建工具的意义
模块化方案
- 提供模块加载方案
- 兼容不同模块规范
语法转译
- 高级语法转译，如Sass、TypeScript
- 资源加载，如图片、字体、worker
产物质量
产物压缩、无用代码删除、语法降级
开发效率
热更新
02 Vite概要介绍
定位:新一代前端构建工具
两大组成部分:
- No-bundle开发服务,源文件无需打包
- 生产环境基于Rollup的 Bundler
核心特征
- 高性能,dev启动速度和热更新速度非常快!
- 简单易用，开发者体验好
当下问题
- 缓慢的启动->项目编译等待成本高
- 缓慢的热更新->修改代码后不能实时更新
两大行业的趋势
- 全球浏览器对原生ESM的普遍支持(目前占比 92% 以上)
- 基于原生语言(Go、Rust)编写前端编译工具链
- 如Go语言编写的Esbuild、Rust 编写的SWwc
浏览器原生ESM支持
两大要素
- script标签增加type="module”属性
- 使用ESM模块导入导出语法
基于原生ESM 的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
基于Esbuild的编译性能优化
Esbuild——基于Golang开发的前端工具,具备如下能力:
- 打包器 Bundler
- 编译器Transformer
- 压缩器Minifier
性能极高,在Vite中被深度使用
03 Vite 上手实战
项目初始化
Vite项目初始化
输入初始化参数
启动后截图
使用Sass/Scss & CSS Modules
使用Scss & CSS Modules
目录结构
引入 Header 组件
使用静态资源
目录结构
以svg图片为例
除了常见的图片格式, Vite也内置了对于JSON、Worker、WASM资源的加载支持
使用HMR
无需额外配置，自动开启
生产环境Tree Shaking
优化原理:
- 基于ESM的import/export语句依赖关系，与运行时状态无关
- 在构建阶段将未使用到的代码进行删除
Tree Shaking在 Vite中无需配置，默认开启!
04 Vite整体架构
关键技术:依赖预打包
为什么要进行预打包?
- 避免node_modules过多的文件请求
- 将CommonJS格式转换为ESM格式
实现原理:
- 服务启动前扫描代码中用到的依赖
- 用Esbuild对依赖代码进行预打包
- 改写import语句，指定依赖为预构建产物路径
关键技术:单文件编译
用Esbuild 编译TS/JSX
优势:编译速度提升10-100 x
局限性:
- 不支持类型检查
- 不支持语法降级到ES5
关键技术:代码压缩
压缩性能对比
Esbuild 作为默认压缩工具，替换传统的Terser、Uglify.js 等压缩工具
关键技术:插件机制
- 开发阶段->模拟Rollup 插件机制
- 生产环境->直接使用Rollup
- 插件兼容性具体可查阅vite-rollup-plugins.patak.dev/
05 Vite进阶路线
深入双引擎
参考资料:
- Esbuild官方文档
- Rollup官方文档 推荐学习顺序:
- 先了解基本使用,动手尝试各项常用配置;
- 然后学习其插件开发。
