Vite知识体系 | 青训营笔记

祛毒a
78 阅读4分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 12 天

以下为今日课上笔记内容

一.为什么需要构建工具？

1.前端工程的痛点

模块化

  • ESM、CommonJs、UMD 资源编译
  • 高级语法的编译 产物质量
  • 代码体积、代码性能 开发效率
  • 热更新

210da8f1cd399d162926972cdf51814.png

2.前端构建工具的意义

bde4ffb51cd4b44094b9720aa1b33ac.png

二.Vite 是什么? Why Vite?

1.定位: 新一代前端构建工具

两大组成部分

  • No-bundle 开发服务，源文件无需打包
  • 生产环境基于 Rollup 的 Bundler 核心特征
  • 高性能，dev 启动速度和热更新速度非常快!
  • 简单易用，开发者体验好

2.业界案例

0c92bb1a2681f9dc99ec6be4c2e2b87.png

3.当下问题

开发体验问题日渐显露！

  • 缓慢的启动 -> 项目编译等待成本高
  • 缓慢的热更新 ->修改代码后不能实时更新

瓶颈在哪里?

  • bundle 带来的性能开销
  • JavaScript 语言的性能瓶颈

4a9145f198b6f132b143bd0e2b6ec49.png

4.两大行业趋势

a9ee0c4353b0baf3cbcd3caf255d57a.png

5.浏览器原生 ESM 支持

16c81a193c535fd3d683cc57cf1cc60.png

6.基于原生 ESM 的开发服务优势

  • 无需打包项目源代码
  • 天然的按需加载
  • 可以利用文件级的浏览器缓存

e1d2b81e1559bf45d87e2f827e82915.png

7.基于 Esbuild 的编译性能优化

Esbuild --基于 Golang 开发的前端工具，具备如下能力

1）打包器 Bundler

2）编译器 Transformer

3）压缩器 Minifier

性能极高，在 Vite 中被深度使用

b12da69d577b2fdb476a8f71ab89c7c.png

8.内置的 web 构建能力

722ddf8ef49370a2f858e33c2d3cbca.png eb14e7d39b33e3927ac665ad27aee26.png

三.Vite上手使用

1.项目初始化

启动完成后，打开浏览器访问对应地址即可

d99c9af649b55f82444eb5d56b4cce7.png

2.使用 Sass/Scss & CSS Modules

a4601ea49f686c0c17a68ec56907a56.png

3.使用 Scss & CSS Modules

df36455c8b550b468f0bea215f2e17d.png

4.使用静态资源

除了常见的图片格式，Vite 也内置了对于JSON、Worker、WASM 资源的加载支持cn.viteis.dev/guide/featu… static-assets

bb15c412a5dde0ef81641b35f567dfa.png

5.使用 HMR

无需额外配置，自动开启

6.生产环境 Tree Shaking

优化原理

1)基于 ESM 的 import/export 语句依赖关系，与运行时状态无关

2)在构建阶段将未使用到的代码进行删除

Tree Shaking 在 Vite 中无需配置，默认开启!

560e3d7a4c3f65bbb08801ce2990547.png

04102c953d54eb2af5b6ed98478334b.png

Vite 给你最直观的印象 响应迅速 开箱即用.

四.Vite 整体架构

1a34993d93dbbc235950e72aa9948e3.png 1.关键技术:依赖预打包

8f970111e4d53138e09b1153877febf.png

85084eb16a58d638f31480f53308b94.png

为什么要进行预打包?

  • 避免 node modules 过多的文件请求
  • 将 CommonJS 格式转换为 ESM 格式 实现原理
  • 服务启动前扫描代码中用到的依赖
  • 用 Esbuild 对依赖代码进行预打包
  • 改写 import 语句，指定依赖为预构建产物路径

2.关键技术:单文件编译

用 Esbuild 编译 TS/JSX

优势: 编译速度提升 10-100 x

局限性.

  • 不支持类型检查
  • 不支持语法降级到 ES5

6fd45751473794bbc68aaad92398624.png

3.关键技术:代码压缩

Esbuild 作为默认压缩工具，替换传统的 Terser、Uglify.js 等压缩工具

d4165f595c9bbf42adde615558af730.png 4.关键技术:插件机制

31773cd874f5a64ba551a6d2a713f41.png 开发阶段——>模拟 Rollup 插件机制

生产环境——>直接使用 Rollup

34903a39c739615fa9ba8f244e4df04.png

五.Vite 进阶路线

1.深入双引擎

f34b764f84d90eda16013277dea07de.png

2.vite 插件开发

为什么需要插件机制?

  • 抽离核心逻辑
  • 易于拓展

3923e99bbf872deee8bce64398918d2.png

通过上述的 Hook，我们可以在不同的构建阶段插入自定义的逻辑

3.插件示例

1004cab8d5c66a4ef325c61687f7c22.png

参考资料

Vite插件开发文档

  • 复杂度较低的插件:json加载插件
  • 复杂度中等的插件:Esbuild接入插件
  • 复杂度较高的插件:官方React插件

先看文档，过一遍插件钩子的功能,然后多学习其它插件的实现，掌握套路.

4.代码分割(拆包)

参考资料:cn.vitejs.dev/config/buil…

rollupjs.org/guide/en/#o…

2025d877cdb7fa626622b714387f12d.png

5.JS 编译工具(Babel)

出现的原因

  • JavaScript 语法标准繁多,浏览器支持程度不一
  • 开发者需要用到高级语法

参考资料:babel官方站点 babel插件手册 5a44a667a61ac1ad448754afe534591.png

6.语法安全降级

以 Promise 语法为例，IE11 没有支持

4e41e5b20d2938b5acdc5ab256144d7.png

c4d6d404deca24a59e52a7d88ce0269.png

7.服务端渲染(SSR)

一种常见的渲染模式，用于提升首屏性能和 SEO 优化

4a5317b2493fddda0f7f1e9cd9049c3.png

参考资料:

  • Vite-SSR文档
  • Vite官方ssr-demo项目
  • 使用 Vite 搭建 SSR 工程

8。深入了解底层标准

重点特性:

  • CJS 规范
  • ESM 规范
  • HTTP 2.0 特性

参考资料:hacks.mozilla.org/2018/03/es-…?

0fcaaf06ae922a6807a0c5ab6a171c2.png

9.Vite社区生态

Github 40k+ star (可参考 webpack 61.3 K, rollup 21.8 k),并且目前还在持续维护

官方提供插件

  • @vitejs/plugin-vue,提供 Vue 3 支持
  • @viteis/plugin-vue-isx,提供 Vue 3JSX 支持
  • @vitejs/plugin-react,提供 React 支持
  • @vitejs/plugin-legacy,提供低版本浏览器降级支持

海量社区插件 github.com/vitejs/awes…

众多框架内置

c0eb3ed9e624de2d6e35e0115aa2a37.png

avatar
文章
阅读
粉丝