这是我参与「第四届青训营 」笔记创作活动的第10天
01 浅谈构建工具
前端工程的痛点
- 模块化 ESM、CommonJS、UMD
- 资源编译 高级语法的编译
- 产物质量 代码体积、代码性能
- 开发效率 热更新
前端构建工具的意义
02 Vite 概要介绍
定位：新一代前端构建工具
两大组成部分:
- No-bundle开发服务,源文件无需打包
- 生产环境基于Rollup 的 Bundler
核心特征
- 高性能,dev启动速度和热更新速度非常快!
- 简单易用,开发者体验好
当下问题：
- 缓慢的启动 —> 项目编译等待成本高
- 缓慢的热更新 —> 修改代码后不能实时更新
瓶颈在哪里?
- bundle带来的性能开销
- JavaScript语言的性能瓶颈
两大行业趋势
1. 全球浏览器对原生ESM的普遍支持(目前占比92%以上)
两大要素:
- script标签增加type="module”属性
- 使用ESM模块导入导出语法
基于原生ESM的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓
2. 基于原生语言(Go、Rust)编写前端编译工具链，如Go语言编写的Esbuild、 Rust编写的SWC
基于Esbuild的编译性能优化
Esbuild——基于Golang开发的前端工具,具备如下能力:
- 打包器 Bundler
- 编译器 Transformer
- 压缩器 Minifier
性能极高,在Vite中被深度使用
内置的 Web 构建能力
Vite开箱即用的功能等价于
- webpack
- webpack-dev-server
- css-loader
- style-loader
- less-loader
- sass-loader
- postcss-loader
- file-loader
- MiniCssExtractPlugin
- HTMLWebpackPlugin
- ...
03 Vite 上手实战
项目初始化
输入初始化参数
启动后截图
启动完成后，打开浏览器访问对应地址即可
使用Sass/Scss & CSS Modules
使用静态资源
以svg图片为例
除了常见的图片格式, vite也内置了对于JSON、Worker.WASM资源的加载支持
生产环境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
05 Vite 进阶路线
深入双引擎
esbuild
官方文档：esbuild.github.io/
rollup.js
推荐学习顺序:
- 先了解基本使用．动手尝试各项常用配置
- 然后学习其插件开发
Vite插件开发
参考资料:
-
Vite插件开发文档：cn.vitejs.dev/guide/api-p…
-
复杂度较低的插件:json加载插件github.com/vitejs/vite…
-
复杂度中等的插件:Esbuild接入插件github.com/vitejs/vite…
-
复杂度较高的福件:官方React插件github.com/vitejs/vite…
-
先看文档,过一宏插件钩子的功能
-
然后多学习其它插件的实现,掌提套路
代码分割(拆包)
拆包前
问题:
- 无法进行并发请求
- 缓存复用率低
拆包后：
参考资料: cn.vitejs.dev/config/buil…
JS编译工具(Babel)
出现的原因:
- JavaScript语法标准繁多,浏览器支持程度不一
- 开发者需要用到高级语法
参考资料:
- babel官方站点 babeljs.io/docs/en/
- babel插件手册 github.com/jamiebuilds…
