Vite使用 ｜ 青训营笔记

alight0205
66 阅读4分钟

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

Vite

一、为什么需要构建工具

前端工程的问题

  • 模块化：ESM、CommonJS、UMD
  • 资源编译：高级语法的编译，如TS、JSX、SCSS、LESS...
  • 产物质量：代码体积、代码性能、代码兼容性
  • 开发效率：热更新

前端构建工具的意义

image-20220813165512041

二、什么是Vite

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

两大组成部分：

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

核心特征：

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

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

浏览器原生ESM支持，两大要素：

  • script标签增加 type = "module" 属性。
  • 使用 ESM 模块导入语法。
  • import { foo } from './foo.js'

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

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

image-20220813171619315

Vite 基于 Esbuild 的编译性能优化

image-20220813172112911

Esbuild —— 基于 Go 语言开发的前端开发工具，具备以下能力：

  • 打包器 Bundler
  • 编译器 Transformer
  • 压缩器 Minifier

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

Vite开箱即用的功能等价于

  • webpack
  • webpack-dev- server
  • css- loader
  • style- loader
  • less - loader
  • sass- loader
  • postcss- loader
  • file- loader
  • MiniCssExtractPlugin
  • HTMLWebpackPlugin
  • ...

Vite 简洁的配置文件

image-20220814090852003

三、Vite 上手使用

Vite 项目初始化

# 创建 Vite 项目，根据提示配置项目
yarn create vite
# 安装依赖
yarn install
# 启动项目
yarn dev

使用Sass/Less，无需配置，直接安装使用。

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

使用 HMR，无需额外配置，自动开启。

HMR 全称 Hot Module Replacement，中文语境通常翻译为模块热更新，它能够在保持页面状态的情况下动态替换资源模块，提供丝滑顺畅的 Web 页面开发体验。

生产环境 Tree Shaking ，Tree Shaking在Vite中无需配置，默认开启。

Tree Shaking 优化原理:

  1. 基于ESM的import/export语句依赖关系，与运行时状态无关。
  2. 在构建阶段将未使用到的代码进行删除。

四、Vite整体架构

image-20220814090727751

关键技术1：依赖预打包

image-20220814091225406

为什么要进行预打包？

  • 避免 node_modules 过多的文件请求。
  • 将 CommonJS 格式转换为 ESM 格式。

实现原理：

  1. 服务启动前扫描代码中用到的依赖。

  2. 用Esbuild 对依赖代码进行预打包。

  3. 改写 import 语句，指定依赖为预构建产物路径。

    image-20220814091529803

关键技术2：单文件编译

用 Esbuild 编译 TS/JSX

image-20220814091653882

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

局限性：

  • 不支持类型检查。
  • 不支持语法降级到ES6以下。

关键技术3：代码压缩

Esbuild 作为默认压缩工具，替换传统的 Terser/Uglify.js 等压缩工具。压缩速度提升 20 - 30 倍。

image-20220814091933573

关键技术4：插件机制

开发阶段 -> 模拟Rollup 插件机制

生产环境 -> 直接使用 Rollup

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

image-20220814092137676

五、Vite 进阶路线

深入学习双引擎

image-20220814092646072 image-20220814092701711

参考资料：

推荐学习顺序：

  • 先了解基本使用，手动尝试各项常用配置。
  • 然后学习其插件开发。

Vite插件开发

为什么需要插件机制？

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

image-20220814093353999

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

插件实例

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

image-20220814093607307 image-20220814093631319

参考资料

Vite插件开发文档

复杂度较低的插件：json加载插件

复杂度中等的插件：Esbuild插件

复杂度较高的插件：官方React插件

建议：先看文档，过一遍插件钩子的功能，然后多学习其他插件的实现，掌握套路。

代码分割（拆包）

image-20220814094553008

问题：

  • 无法进行并发请求
  • 缓存复用率低

image-20220814094637507

JS 编译工具（Babel）

image-20220814094826807

出现的原因:

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

服务端渲染（SSR）

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

image-20220814095047943

Vite 社区生态

官方提供插件：

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

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

avatar
文章
阅读
粉丝