这是我参与「第四届青训营 」笔记创作活动的的第13天
01. 浅谈构建工具
前端构建工具的意义：
| 问题 | 解决方案 | |
|---|---|---|
| 模块化 | 提供模块化加载方案，兼容不同模块的规范 | |
| 资源编译 | 一些高级的语法，浏览器无法识别，所以需要一些工具将其识别成为浏览器可认识的语法 | 高级语法转译（如Sass，TypeScript），资源的加载（如图片、字体、worker） |
| 产物质量 | 在工作中，需要考虑产物质量（代码体积，代码性能） | 产物压缩，无用代码删除，语法降级 |
| 开发效率 | 热更新 |
02. Vite 概要介绍
Vite 概览：
- 定位：新一代前端构建工具
- 两大组成部分：
- No-bundle开发服务，源文件无需打包
- 生产环境基于Rollup的Bundler
- 核心特征：
- 高性能，启动速度和热更新很快
- 简单易用，开发者体验好
其他工具的问题：
- 缓慢的启动，导致项目编译等待成本高
- 缓慢的热更新，导致修改代码后不能实时更新
瓶颈所在：
- bundle带来的性能开销
- JavaScript语言的性能瓶颈
两大行业趋势：
- 全球浏览器对原生 ESM 的普遍支持（目前占比 92% 以上）
- 基于原生语言（Go、Rust）编写前端编译工具链
- 如 Go 语言编写的 Esbuild、Rust 编写的 SWC
浏览器原生 ESM 支持
两大要素：
- script 标签增加 type="module" 属性
- 使用 ESM 模块导入导出语法
基于原生ESM的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
基于Esbuild的编译性能优化
Esbuild——基于Golang开发的前端工具,具备如下能力:
1.打包器Bundler
2.编译器Transformer
3.压缩器Minifier
性能极高，在 Vite中被深度使用
内置的 web 构建能力
Vite开箱即用的功能等价于
- webpack
- webpack-dev-server
- css-loader
- style-loader
- less-loader
- sass-loader
- postcss-loader
- file-loader
- MiniCssExtractPlugin
- HTMLWebpackPlugin
- ...
03. Vite 上手实战
1. 项目初始化
- 安装pnpm
npm i -g pnpm - 初始化命令
pnpm create vite - 安装依赖
pnpm install - 启动项目
npm run dev
2. 使用Sass/Scss&CSS Modules
目录结构
安装Sass pnpm i sass -D
引入Header组件
3. 使用静态资源
目录结构
以 svg 图片为例
除了常见的图片格式，Vite也内置了对于JSON、Worker、WASM资源的加载支持
功能 | Vite 官方中文文档 (vitejs.dev)
使用 HMR
4、生产环境Tree Shaking
优化原理：
- 基于ESM的
import/export语句依赖关系，与运行时状态无关 - 在构建阶段将未使用的代码进行删除
Tree Shaking 在 Vite 种无需配置，默认开启！
5、Vite最直观的印象
- 响应迅速
- 开箱即用
04. Vite 整体架构
1、依赖预打包
原因：
- 避免
node_modules过多的文件请求 - 将 Commonjs 格式转换为 ESM 格式
实现原理：
- 服务启动前扫描代码中用到的依赖
- 用Esbuild对以来代码进行预打包
- 改写
import语句，指定依赖为预构建产物路径
2、单文件编译
用Esbuild编译TS/JSX
-
优势：编译速度提升10-100x
-
局限性：
- 不支持类型检查
- 不支持语法降级到ES5
3、代码压缩
Esbuild作为默认压缩工具，替换传统的Terser、Uglify.js等压缩工具
4、插件机制
- 开发阶段->模拟Rollup插件机制
- 生产环境->直接使用Rollup
插件兼容性具体可查阅：Vite Rollup Plugins (patak.dev)
05. Vite 进阶路线
参考资料：
esbuild 官方文档
rollup.js 官方文档
推荐学习顺序：
- 先了解基本使用，动手尝试各项常用配置
- 然后学习其插件开发
为什么需要插件机制？
- 抽象核心逻辑
- 易于拓展
插件开发
参考文档：
Vite 插件开发文档
json 加载插件
esbuild 接入插件
官方 react 插件
先看文档，过一遍插件钩子的功能，然后多学习其他插件的实现，掌握套路
代码分割（拆包）
参考资料：
构建选项 | Vite 官方中文文档 (vitejs.dev)
构建选项 | Vite 官方中文文档 (vitejs.dev)
JS 编译工具（Babel）
参考资料：
语法安全降级
参考资料：
服务端渲染（SSR）
深入了解底层标准
参考资料：
ES modules: A cartoon deep-dive - Mozilla Hacks - the Web developer blog
Publish ESM and CJS in a single package (antfu.me)
Vite 社区生态
vitejs/awesome-vite: ⚡️ A curated list of awesome things related to Vite.js (github.com)
