这是我参与「第五届青训营」伴学笔记创作活动的第14天
知识要点
- Vite基本概要
- Vite上手实战
- Vite进阶路线
前端工程不同的问题
- 模块化
- 资源编译
- 产物质量
- 开发效率
前端构建工具的意义
- 模块化方案
- 提供模块加载方案
- 兼容不同模块规范
- 语法转译
- 高级语法转移
- 资源加载
- 产物质量
- 产物压缩
- 无用代码删除
- 语法降级
- 开发效率
- 热更新
Vite概览
定位：新一代前端构建工具
两大组成部分：
- No-Bundle开发服务，源文件无需打包
- 生产环境基于Rollup的Bundler
核心特征：
- 高性能，dev启动速度和热更新速度非常快
- 简单易用，开发者体验好
项目初始化
提前安装pnpm,在终端输入以下代码
npm i -g pnpm
初始化命令
pnpm create vite
安装依赖
pnpm install
启动项目
npm run dev
生产环境 Tree Shaking
优化原理：
- jiyuESM的import/export语句依赖关系，与运行时状态无关
- 在构建阶段将未使用到的代码进行删除
关键技术 单文件编译
用Esbuild编译TS/JSX
优势：编译速度提升10-100x
局限性：
- 不支持类型检查
- 不支持语法降级到ES5
关键技术 代码压缩
Esbuild作为默认压缩工具，替换传统的Terser、Uglify.js
关键技术 插件机制
开发阶段 -> 模拟Rollup插件机制
生产环境 -> 直接使用Rollup
深入双引擎
esbuild和rollup
参考资料：
- Esbuild官方文档
- Rollup官方文档
推荐学习顺序：
- 先了解基本使用，动手尝试各项常用配置
- 然后学习其插件开发
为什么需要插件机制
- 抽离核心逻辑
- 易于拓展
Vite插件开发
先看文档，过一遍插件钩子的功能，然后多学习其他插件的实现，掌握套路
个人感悟
Vite是目前比较多人使用的前端构建工具，掌握这个能对以后工作有挺大的帮助
