这是我参与「第五届青训营 」伴学笔记创作活动的第14天
一、本堂课重点内容：
- 浅谈构建工具
- Vite概要介绍
- Vite上手实战
- Vite整体架构
- Vite进阶路线
二、详细知识点介绍：
为什么需要构建工具
前端痛点：资源
问题与痛点：
- 模块化 ESM、CommonJS 、UMD
- 资源编译 高级语法的编译
- 产品质量 代码体积、代码性能
- 开发效率 热更新
构建工具的意义：
-
模块化：ESM、CommonJs、UMD
-
模块化方案
- 提供模块加载方案
- 兼容不同模块规范
-
-
资源编译： 高级语法的编译
-
语法转译
- 高级语法转译：如Sass、TypeScript
- 资源加载：如图片、字体、worker
-
-
产物质量： 代码体积、代码性能
-
方案
- 产物压缩、无用代码删除、语法降级
-
-
开发效率： 热更新
Vite概要介绍
Vite 概览：
-
定位：新一代前端构建工具
-
两大组成部分：
- No-bundle开发服务，源文件无需打包
- 生产环境基于Rollup的Bundler
-
核心特征：
- 高性能，启动速度和热更新很快
- 简单易用，开发者体验好
当下问题：
- 缓慢的启动，导致项目编译等待成本高
- 缓慢的热更新，导致修改代码后不能实时更新
瓶颈所在：
- bundle带来的性能开销
- JavaScript语言的性能瓶颈
浏览器原生ESM支持：
两大要素:
- script标签增加type="'module"属性
- 使用ESM模块导入导出语法
两大行业趋势：
- 全球浏览器对原生 ESM 的普遍支持（目前占比 92% 以上）
- 基于原生语言（Go、Rust）编写前端编译工具链
- 如 Go 语言编写的 Esbuild、Rust 编写的 SWC
Vite上手实战
1. 项目初始化
- 安装pnpm
npm i -g pnpm - 初始化命令
pnpm create vite - 安装依赖
pnpm install - 启动项目
npm run dev
2、生产环境Tree Shaking
优化原理：
- 基于ESM的
import/export语句依赖关系，与运行时状态无关 - 在构建阶段将未使用的代码进行删除
Tree Shaking 在 Vite 种无需配置，默认开启！
3、Vite最直观的印象
- 响应迅速
- 开箱即用
Vite整体架构
1、依赖预打包
原因：
- 避免
node_modules过多的文件请求 - 将 Commonjs 格式转换为 ESM 格式
实现原理：
- 服务启动前扫描代码中用到的依赖
- 用Esbuild对以来代码进行预打包
- 改写
import语句，指定依赖为预构建产物路径
2、单文件编译
用Esbuild编译TS/JSX
-
优势：编译速度提升10-100x
-
局限性：
- 不支持类型检查
- 不支持语法降级到ES5
3、代码压缩
Esbuild作为默认压缩工具，替换传统的Terser、Uglify.js等压缩工具
4、插件机制
- 开发阶段->模拟Rollup插件机制
- 生产环境->直接使用Rollup
