Vite知识体系 | 青训营笔记

chunchun2020
112 阅读4分钟

Vite知识体系 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第14天 与大家分享Vite的知识体系、基础知识，包括Vite的优势、实操、进阶等，不足之处欢迎大家批评指正！

01 浅谈构建工具

前端工程的痛点

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

image.png

前端构建工具的意义

image.png

02 Vite概要介绍

Vite概览

  • 定位 新一代前端构建工具
  • 两大组成部分
  1. No-bundle开发服务:源文件无需打包
  2. 生产环境基于Rollup的Bundler
  • 核心特征
  1. 高性能,dev启动速度和热更新非常快
  2. 简单易用，开发者体验好

image.png

业界案例

  • Rollup -> Vite 启动时间：2分15秒 -> 1.7秒

更新时间：23秒 -> 1秒以内

image.png

  • Webpack -> Vite 启动时间：2分36秒 -> 6秒

更新时间：13秒 -> 1秒以内

image.png

当下问题

缓慢的启动 -> 项目编译等待成本高

缓慢的热更新 -> 修改代码后不能实时更新

开发体验问题日渐显露！

  • 瓶颈： bundle带来的性能开销

JavaScript语言性能瓶颈

image.png

两大行业趋势

全球浏览器对原生ESM的普遍支持（目前占比92%以上）

image.png

基于原生语言(Go,Rust)编写前端编译工具链

如Go语言编写的Esbuild、Rust编写的SWC

image.png

浏览器原生ESM支持

两大要素：

  1. script标签增加
  2. 使用ESM模块导入导出语法

image.png

image.png

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

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

image.png

基于Esbuild的编译性能优化

  • Esbuild————基于Golang开发的前端工具，具备如下能力：
  1. 打包器Bundler
  2. 编译器Transformer
  3. 压缩器Minifier
  • 性能极高，在Vite中被深度使用

image.png

内置的Web构建能力

image.png

  • webpack.config.ts

image.png

等价于

  • vite.config.ts

image.png

03 Vite上手实战

项目初始化

image.png

输入初始化参数

image.png

启动后截图

image.png

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

使用Sass/Scss & CSS Modules

  • 目录结构

image.png

  • 安装Sass

image.png

  • index.tsx image.png
  • index.module.scss

image.png

  • 引入Header组件

image.png

使用静态资源

  • 以svg图片为例

除了常见的图片格式，Vite也内置了对于JSON、Worker、WASM资源的加载支持

Vite官方中文文档：cn.vitejs.dev/guide/featu…

image.png

使用HMR

无需额外配置，自动开启

image.png

生产环境Tree-shaking

优化原理：

  1. 基于ESM的import/export
  2. 在构建阶段将未使用到的代码进行删除

Tree-shaking在Vite中无需额外配置，自动开启

image.png

image.png

Vite特点

  • 响应迅速
  • 开箱即用

04 Vite整体框架

image.png

关键技术：依赖预打包

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

image.png

image.png

关键技术：单文件编译

  • 用Esbuild编译TS/JSX

image.png

  • 优势 编译速度提示10-100x

  • 局限性

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

image.png

关键技术：代码压缩

Esbuild作为默认编译工具，替换传统的Terser,Uglify等压缩工具

image.png

压缩性能对比

image.png

关键技术：插件机制

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

image.png

插件兼容性 vite-rollup-plugins.patak.dev/

image.png

05 Vite进阶路线

深入双引擎

image.png

Rollup官方文档：rollupjs.org/guide/

image.png

  • 推荐学习顺序

  1. 先了解基本使用，动手尝试各项常用配置

  2. 然后学习其插件开发

插件开发

  • 为什么需要插件机制
  1. 抽离核心逻辑
  2. 易于拓展

image.png

插件示例

  1. 开发Vite插件
  2. 配置文件引入插件

image.png

image.png

参考资料

Vite插件开发文档：cn.vitejs.dev/guide/api-p…

复杂度较低的插件:Json加载插件 github.com/vitejs/vite…

复杂度中等的插件：Esbuild接入插件 github.com/vitejs/vite…

复杂度较高的插件：官方React插件 github.com/vitejs/vite…

先看文档，过一遍钩子的功能

然后多学习其他插件的实现，掌握套路

代码分割（拆包）

  • 拆包前

问题：

  1. 无法进行并发请求

  2. 缓存复用率低

image.png

  • 拆包后

image.png

参考资料：

cn.vitejs.dev/config/buil…

rollupjs.org/guide/en/#o…

JS编译工具(Babel)

  • 出现的原因
  1. JavaScript语法标准繁多，浏览器支持程度不一
  2. 开发者需要用到高级语法

image.png

语法安全降级

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

image.png

  • 避免问题

image.png

  • 参考资料

@babel/preset-env文档： babeljs.io/docs/en/bab…

Vite官方降级插件文档：github.com/vitejs/vite…

服务器渲染

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

  • 构建阶段

image.png

  • 代码执行阶段

image.png

深入了解底层标准

  • 重点特性 CJS规范

ESM规范

HTTP2.0特性

image.png 参考资料：

hacks.mozilla.org/2018/03/es-…

antfu.me/posts/publi…

Vite社区生态

  • Github 40K + star（可参考webpack 61.3K,rollup 21.8k）,并且目前还在维护

  • 官方提供插件 @vitejs/plugin-vue，提供Vue3支持 @vitejs/plugin-vue-jsx，提供Vue3 JSX支持 @vitejs/plugin-react，提供React支持 @vitejs/plugin-legacy，提供低版本浏览器降级支持

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

  • 众多框架内置

image.png

avatar
文章
阅读
粉丝