「Vite知识体系学习二」 | 青训营笔记

秋意微醺时
89 阅读1分钟

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

Vite给我的直观印象：相应迅速，开箱即用

Vite整体架构

image.png

关键技术：依赖预打包

为什么要进行预打包?

  1. 避免node_modules过多的文件请求
    1. 将CommonJS格式转换为ESM格式 image.png

实现原理:

  1. 服务启动前扫描代码中用到的依赖
  2. 用Esbuild对依赖代码进行预打包
  3. 改写import语句，指定依赖为预构建产物路径

image.png

关键技术：单文件编译

用Esbuild编译TS/JSX image.png

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

局限性

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

image.png

关键技术：代码压缩

image.png

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

关键技术：插件机制

image.png

  • 开发阶段->模拟 Rollup 插件机制
  • 生产环境->直接使用Rollup
image.png

插件兼容性具体可查阅vite-rollup-plugins.patak.dev/

Vite进阶路线

深入双引擎

image.png image.png

参考资料：

Vite插件开发

为什么需要插件机制？

  • 抽离核心逻辑
  • 利于扩展

图解

image.png

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

参考资料：

avatar
文章
阅读
粉丝