Vite知识体系 | 青训营笔记

Eliauk要努力
71 阅读2分钟

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

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

前端工程的痛点

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

前端构建工具的意义

graph LR
模块化方案 --> 提供模块加载方案&nbsp兼容不同模块规范

graph LR
语法转译 --> 高级语法转译如SassTypeScript&nbsp资源加载如图片字体worker

graph LR
产物质量 --> 产物压缩&nbsp无用代码删除&nbsp语法降级

graph LR
开发效率 --> 热更新

二、Vite是什么？Why Vite？

定位：新一代前端构建工具

两大组成部分：

  1. No-bundle开发服务，源文件无需打包
  2. 生产环境基于Rollup的Bundler

核心特征：

  1. 高性能，dev启动速度和热更新速度非常快！
  2. 简单易用，开发者体验好

浏览器原生ESM支持

两大要素：

  1. script标签增加type="module"属性
  2. 使用ESM模块导入导出语法

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

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

三、Vite上手使用

  • 项目初始化
    • 输入初始化参数
    • 启动后截图
    • 启动完成后，打开浏览器访问对应地址即可
  • 使用Sass/Scss & CSS Module
  • 使用静态资源
  • 使用HMR生产环境Tree-shaking
    • 优化原理：1、基于ESM的import/export语句依赖关系，与运行时状态无关 2、在构建阶段将未使用到的代码进行删除

四、Vite整体架构

关键技术：依赖预打包

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

实现原理：

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

关键技术：单文件编译

用Esbuild编译TS/JSX

优势：编译速度提升10-100X

局限性：

  1. 不支持类型检查
  2. 不支持语法降级到ES5

关键技术：代码压缩

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

五、Vite进阶路线

Vite插件开发

为什么需要插件机制？

  • 抽离核心逻辑
  • 易于拓展
  1. 服务启动阶段
  2. 请求响应阶段
  3. 热更新阶段
  4. 服务关闭阶段

我们可以在不同的构建阶段插入自定义的逻辑

JS编译工具（Babel）

出现的原因：

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

语法安全降级 如何在构建产物中避免这类问题？.png

服务端渲染—（SSR）

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

构建阶段

graph LR
项目源码 --> 构建流程 --> 客户端产物-运行在浏览器
构建流程 --> SSR产物-运行在服务端Node.js

代码执行阶段

graph LR
加载SSR入口 --> 数据预取 --> 组件渲染 --> HTML拼接
avatar
文章
阅读
粉丝