这是我参与「第四届青训营」笔记创作活动的的第 12 天。
为什么需要构建工具
前端工程的痛点
核心要素 => 资源
-
模块化
- ESM、CommonJS、UMD
-
资源编译
- 高级语法编译
-
产物质量
- 代码体积、代码性能
-
开发效率
- 热更新
前端构建工具的意义
-
模块化方案
- 提供模块加载方案
- 兼容不同模块规范
-
语法转译
- 高级语法转译，如Sass、TypeScript
- 资源加载，如图片、字体、worker
-
产物质量
- 产物压缩、无用代码删除
- 语法降级
-
开发效率
- 热更新
Vite是什么？ Why Vite？
Vite概览
-
定位：新一代前端构建工具
-
两大组成部分
- No-bundle开发服务，源文件无需打包
- 生产环境基于Rollup的Bundler
-
核心特征
- 高性能，dev启动速度和热更新速度非常快（响应迅速）
- 简单易用，开发者体验好（开箱即用）
当下问题
-
缓慢的启动 => 项目编译等待成本高
-
缓慢的热更新 =>修改代码后不能实时更新
-
瓶颈
- bundle带来的性能开销
- JavaScript语言的性能瓶颈
两大行业趋势
-
全球浏览器对原生ESM的普遍支持（目前占比92%以上）
-
两大要素
scrip标签增加type="module"属性- 使用ESM模块导入导出语法
-
-
基于原生语言（Go、Rust）编写前端编译工具链
- 如Go语言编写的Esbuild、Rust编写的SWC
Vite优势
-
基于原生ESM的开发服务优势
- 无需打包项目源码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
-
基于Esbuild的编译性能优化
- 打包器Bundler
- 编译器Transformer
- 压缩器Minifier
-
内置的Web构建能力
- Vite开箱即用的功能丰富
进阶路线
-
深入双引擎
- Esbuild官方文档
- Rollup官方文档
- 先了解基本使用，动手尝试各项常用配置，如何学习其插件开发
-
Vite插件开发
-
为什么需要插件机制
- 抽离核心逻辑
- 易于拓展
-
先看文档，过一遍插件钩子的功能，然后多学习其他插件的实现，掌握套路
-
-
代码分割（拆包）
-
问题：
- 无法进行并发请求
- 缓存复用率低
-
-
JS编译工具（Babel）
-
出现原因：
- JavaScript语法标准繁多，浏览器支持程度不一
- 开发者需要用到高级语法
-
-
语法安全降级
-
上层解决方案：@vitejs/plugin-legacy
-
底层原理
- 借助Babel进行语法自动降级
- 提前Polyfill注入实现，如core-js、regenerator-runtime
-
-
服务端渲染（SSR）
- 一种常见的渲染模式，用于提升首屏性能和SEO优化
-
深入了解底层标准
-
Vite社区生态
