[ Vite 知识体系 下 | 青训营笔记]

小羊小羊懒得吃草
96 阅读4分钟

这是我参与「第五届青训营」笔记创作活动的第二十七天

Vite 上手实战与架构解析

如何使用Vite

项目初始化
  • dev: 启动开发服务器
  • build：生产环境打包，底层用的是Rollup, tsc && vite biuld这里为什么有tsc呢, vite底层打包使用的Esbuild并不提供TypeScript的类型支持，所以我们需要借助ts官方的工具tsc来进行类型的检查(即先进行类型检查再进行打包)
  • preview: 通过生产模式打出最终产物后，怎么来预览产物的内容
接入一些常用的CSS module

  • 例: pnpm i sass -D

  • vite会默认地把.module.scss结尾的文件当作css module进行处理

  • 使用CSS Module可以做到不同组件之间的样式隔离，防止组件间样式污染

使用静态资源
使用HMR
  • HMR是可以保存组件的局部状态的
生产环境的Tree Shaking
  • 为了调试，我们可以先暂时把生产环境的代码压缩先关掉 (注：代码压缩和Tree Shaking不是同一个东西)
  • Vite的Tree Shaking是基于Rollup的
对Vite的直观印象

Vite的整体架构

依赖预打包
  • node_modules是一个非常不可控的一个东西，可能会夹杂非常多的文件请求，比如说Lodash这个库把它引进来后，你要引入一个debounce方法，会导致六七百个文件的引入，这个文件的请求数量是相当大的
  • node_modules里的一些代码产物是不规范的，可能是CommonJS，放到浏览器里就跑不起来了
  • 针对以上两个问题，Vite是进行了一个预打包
代码压缩
  • 代码压缩是生产环境中非常重要的一个阶段，也是非常耗时的一个阶段
插件机制
  • 在开发阶段Vite是开发了一个Plugin Container的一个东西，用来模拟Rollup的插件环境，生产环境下就可以直接使用Rollup => 最后的效果就是Vite的插件既可以用在开发阶段也可以用在生产阶段, (当然Rollup的插件是不一定能使用到Vite当中的)

Vite 进阶路线

Vite的插件开发

为什么需要插件机制
  1. 抽离核心逻辑 => 把Dev Server的逻辑抽离出来，把构建相关的能力封装成一个个的插件，这样可以达到一个解耦的效果，这样构建和Dev Server的逻辑是分开的，更容易维护
  2. 易于扩展 => 有了这个插件机制之后, 社区也可以给Vite贡献一些插件，目前生态也是非常的丰富
Vite的钩子介绍

Vite钩子介绍

  • Vite在开发阶段是一个Dev Server，所以它在服务启动阶段，请求响应阶段等各个阶段，都会插入不同的Hook，我们可以在插件写钩子函数，通过这些钩子函数，在不同的构建阶段去插入我们自定义的逻辑 (推荐大家掌握一些常用的钩子就可以了，比如说config，resolveId, load, transform)
插件示例
  • 这个插件所做的事情 把自定义的文件内容进行一个编译，把编译的结果返回给Vite
参考资料
代码分割|拆包
JS编译工具
语法安全降级
SSR服务端渲染
  • 和原来的模式最大的不同是，除了构建出原来前端的产物，也会构建出一份SSR的产物，这份产物是跑在Node.js (服务端)，在代码执行的阶段，我们在服务端会拿到SSR的产物，进行数据的预取，进行组件的渲染，然后在服务端就把HTML的内容给产出出来，这样前端能够拿到的是完整的HTML内容，而不是之前的仅仅一个<div id="root"></div>，因此可以更快地渲染到页面上(提高首屏时间)

服务端渲染 | Vite 官方中文文档 (vitejs.dev)

服务端渲染 | Vite 官方中文文档 (vitejs.dev)

深入浅出 Vite - 神三元 - 掘金小册 (juejin.cn)

深入了解底层标准
Vite的社区生态
avatar
文章
阅读
粉丝