这是我参与「第四届青训营 」笔记创作活动的的第19天
01. 浅谈构建工具
为什么需要构建工具?
02. Vite概要介绍
Vite定位: 新一代前端构建工具
两大组成部分:
- No-bundle开发服务, 源文件无需打包
- 生产环境是基于Roolup的Bundler
核心特征:
- 高性能, dev启动速度和热更新的速度非常快
- 简单易用, 开发者体验好
这是业界案例的一张简单对比图, 可以让大家感受到Vite的速度之快
和Webpack等老牌打包工具相比, Vite避免了它们的一些劣势
Vite采用基于原生ESM的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
Vite的两大核心是Esbuild和Roolup
Esbuild---基于Golang开发的前端工具, 具有极高的性能, 在Vite中被深度使用
- 打包器Bundler
- 编译器Transformer
- 压缩器Minifier
Vite除了启动速度快, 和热加载速度快, 开箱即用的许多功能也是十分便捷的
体现在项目源码上, 就是如下的效果
03. Vite上手实战
npm i -g pnpm
pnpm create vite
pnpm i
npm run dev / yarn dev
在Vite创建的项目中, 可以使用Sass/Scss,可以使用静态资源/JSON/Worker/WASM
Vite项目还会自动开启HMR热加载功能(Hot Mode Replacement), 值得注意的是:项目的组件修改并HMR后, 其他组件的状态(例如数字不会改变), 这是其他打包工具很难做到的
除此之外, Vite还自带生成环境Tree Shaking的功能, 优化原理为:
- 基于ESM的import/export语句依赖关系, 与运行时状态无关
- 在构建阶段将未使用到的代码进行删除
Note : CommonJs格式不能在Vite项目中做到TreeShaking, require的部分可能依赖运行时计算的结果---require(someVarible)
Vite给我最直观的印象:
- 响应迅速
- 开箱即用
04. Vite整体架构
Vite的整体架构主要是分为Dev阶段和Prod阶段, 以及模仿Roolup的一个Plugin Container
关键技术:依赖预打包
关键技术:单文件编译
提升了速度, 但不支持TS的类型检查和语法降级到ES5
关键技术:代码压缩
关键技术:插件机制
05. Vite进阶路线
Vite技术尚在开发中, 深入理解双引擎是Vite进阶的核心
除此之外, 理解插件机制也是必备的一环
众所周知, 插件的作用就是
- 抽离核心逻辑
- 易于拓展
此外, 我们还要了解代码分割, Babel(JS编译工具),语法安全降级,SSR(服务端渲染),深入了解底层标准和关注Vite社区生态, 不断学习与进步, 才能在Vite进阶的路上走的越来越远...
