这是我参与「第五届青训营 」伴学笔记创作活动的第29天。
Vite知识体系
为什么需要构建工具
前端工程的痛点
核心要素——资源
- 模块化
- 资源编译
- 产物质量
- 开发效率
前端构建工具的定义
- 模块化方案：
- 提供模块加载方案
- 兼容不同模块规范
- 语法转译：
- 高级语法转译，如Sass、TypeScript
- 资源加载，如图片、字体、worker
- 产物质量：
- 产物压缩、无用代码删除、语法降级
- 开发效率：
- 热更新
Vite what&why
Vite 定义：新一代前端构建工具
- 两大组成部分：
- No-bundle开发服务，源文件无需打包
- 生产环境基于Rollup的Bundler
- 核心特征：
- 高性能，dev启动速度和热更新速度非常快
- 简单易用，开发者体验好
当下问题
缓慢的启动——>项目编译等待成本高 缓慢的热更新——>修改代码后不能实时更新
瓶颈？
- ⚠bundle带来的性能开销
- ⚠JaveScript语言的性能瓶颈
两大行业趋势
- 全球浏览器对原生ESM的普遍支持
- 基于原生语言（Go、Rust）编写前端编译工具链
- 如Go语言编写的Esbuild、Rust编写的SWC
浏览器原生ESM支持
两大要素：
- script标签增加 type="module"属性
- 使用ESM模块导入导出语法
基于原生ESM的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
基于Esbuild的编译性能优化
Esbuild————基于Golang开发的前端工具，具备如下能力
- 打包器 Bundler
- 编译器 Transformer
- 压缩器 Minifier
🧨性能极高，在Vite中被深度使用
内置的Web构建能力
Vite开箱即用的功能等价于
- 👁 webpack
- 👁 webpack-dev-server
- 👁 css-loader
- 👁 style-loader
- 👁 less-loader
- 👁 postcss-loader
- 👁 file-loader
- 👁 MiniCssExtractPlugin
- 👁 HTMLWebpackPlugin
- ......
如何上手Vite
Vite项目初始化
- 🔯
npm i -g pnpm//提前安装pnpm - 🔯
pnpm create vite//初始化命令 - 🔯
pnpm install//安装依赖 - 🔯
npm run dev//启动项目
使用Sass/Scss & CSS Module
- 💥
pnpm i sass -D - 💥
import styles from './index.module.scss'
使用Scss & CSS Module
引入Header组件
使用静态资源
生产环境 Tree-Shaking
优化原理
- 基于ESM的import/export语句依赖关系,与运行时状态无关
- 在构建阶段将未使用到的代码进行删除
Vite:响应迅速 开箱即用
Vite整体架构
关键技术:依赖预打包
❓为什么要进行预打包
- 避免 node_modules 过多的文件请求
- 将CommonJS格式转换为ESM格式
实验原理:
- 服务启动前扫描代码中用到的依赖
- 用Esbuild对依赖代码进行预打包
- 改写impart语句,指定依赖为预构建产物路径
关键技术:单文件编译
用Esbuild编译TS/JSX
优势:编译速度提升10-100x
局限性:
- 不支持类型检查
- 不支持语法降级到ES5
关键技术:代码压缩
关键技术:插件机制
- 开发阶段 --> 模拟Rollup插件机制
- 生产环境 --> 直接使用Rullup
Vite进阶路线
深入双引擎
Esbuild esbuild.github.io/
Rolluop rollupjs.org/
Vite插件开发
❓为什么需要插件机制
- 抽离核心逻辑
- 易于拓展
代码分割(拆包)
JS编译工具(Babel)
出现原因:
- JS语法标准繁多,浏览器支持程度不一
- 开发者需要用到高级语法
语法安全降级
如何在构建产物中避免这类问题
- 上层解决方案: @vitejs/plugin-legacy
- 底层原理
- 借助Babel进行语法自动降级
- 提前注入Polyfill实现,如core-js、regenerator-runtime
