Vite 知识体系 | 青训营

怒码少年
69 阅读9分钟

1.1 浅谈架构工具

为什么需要架构工具？

因为架构工具解决了前端开发具有以下的痛点：

  • 不同的模块化标准 架构工具提供的解决方案：提供模块加载方案，兼容不同的模块规范。
  • 如何进行资源编译 架构工具提供的解决方案：高级语法转换（less转CSS，ts转js）；资源加载，如图片、字体等
  • 产品质量（比如代码体积，代码性能，兼容性） 架构工具提供的解决方案：产物压缩，无用代码删除，语法降级。
  • 开发效率 架构工具提供的解决方案：热更新。

1.2 Vite 概要介绍

什么是vite？为什么用vite？

第一问答：

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

第二问答：

（1）当下架构工具普遍具有以下的问题：dev服务器启动速度慢（项目编译等待成本高），并且热更新速度慢（修改代码后不能实时更新）。而vite解决了这个问题。

（2）目前浏览器普遍对于原生ESM提供支持。Vite使用了ESM标准，最大限度地发挥了其优势。

ESM是ECMAScript Modules的缩写，是JavaScript的一种模块化标准，它允许我们在JavaScript文件中使用import和export语句来导入和导出变量、函数、类等。ESM可以让我们更好地组织和管理代码，避免命名冲突和全局污染，实现代码的复用和解耦。 要使用ESM，我们需要在script标签中添加type="module"属性，这样浏览器就会将该脚本视为一个ESM模块，并按照ESM的规则进行解析和执行。例如：

<script type="module">
		import { hi } from './hi.js'
		console.log(hi)
</script>

基于ESM，我们就会有以下优势：

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

(3)Esbuild —— 基于Golang开发的前端工具，具备如下能力：

  1. 打包器 Bundler
  2. 编译器 Transformer
  3. 压缩器 Minifier

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

（4）Vite开箱即用的功能等价于

转存失败，建议直接上传图片文件

1.3 Vite 上手实战

如何使用Vite？

要使用vite，我们首先需要安装Node.js和npm，这是前端开发的基本环境。

  1. 提前安装 pnpm

pnpm 是一种可替代 npm 的包管理工具。与 npm 类似，pnpm 也用于下载、安装和管理 JavaScript 包和模块。但是，它在一些方面与 npm 不同，并提供了一些额外的优势。

下面是一些 pnpm 相对于 npm 的区别和优势：

快速安装和更新：pnpm 使用一种称为“链接包”的机制，它只会在磁盘上保存一个包的副本，并在各个项目之间共享。这意味着当你在多个项目中使用相同的包时，只需下载一次，而不是针对每个项目都下载一份。这种机制可以加快安装和更新的速度。

更少的磁盘空间占用：由于 pnpm 的链接包机制，它可以减少磁盘上的重复包，从而减少磁盘空间的占用。这对于使用多个项目或大型项目的开发者来说尤其有用。

并行安装：pnpm 能够并行安装多个包，这意味着它在安装依赖时能够更快地完成。

易于迁移：如果你已经使用 npm，你可以很容易地迁移到 pnpm。它兼容 package.json 和 npm 的命令，无需对现有代码进行修改。

尽管 pnpm 提供了这些优势，但是否有必要使用它取决于你的具体情况和需求。如果你使用多个项目或大型项目，并且对安装时间和磁盘空间占用有着高效率的要求，那么 pnpm 可能会对你有所帮助。但如果你的项目规模较小，或者没有特别关注这些问题，继续使用 npm 也是可以的。

最后，无论你选择使用 npm 还是 pnpm，重要的是要了解和熟悉所使用的工具，并在项目中正确配置和优化依赖项管理。

npm i -g pnpm

2. 初始化命令

pnpm create vite

  • 执行完这步之后，会让你填写vite包的名称，这里默认是vite-project，不改就直接回车即可

  • 然后显示一些常见的框架vue、react等等，上下键选择，回车确认。例如这里选择react（后面都以选择react为例子）

  • 然后选择开发方式，上下键选择，回车确认。 这时项目目录内就会生成一个叫vite-project的文件夹

  1. 进入文件夹
cd vite-project

4. 安装依赖

pnpm install

5. 启动项目

npm run dev

转存失败，建议直接上传图片文件

默认开启Tree shaking

Tree shaking 是一种用于优化 JavaScript 模块打包大小的技术。它的目标是删除应用程序中没有使用的代码，以减少打包后的文件体积。

Tree shaking 的原理是通过静态代码分析来确定哪些代码被应用程序使用，然后将未使用的代码标记为可删除。这样，在打包过程中，这些未使用的代码将被移除，从而减少了最终生成的包的大小。

1.4 Vite整体架构

  1. 依赖预打包 依赖预打包是vite的一个重要特性，它可以提高开发服务器的启动速度和热更新速度。依赖预打包的原理是，在第一次启动开发服务器时，vite会扫描项目中的所有依赖模块（即node_modules中的模块），并使用esbuild将它们转换为ESM格式，并缓存到一个临时目录中。这样，当开发服务器需要加载某个依赖模块时，就可以直接从缓存中读取，而无需再次转换。这样可以避免每次启动或更新时都要对所有的依赖模块进行转换，从而节省了时间和资源。

  2. vite单文件编译（esbuild） vite单文件编译是指vite在开发服务器中对项目源代码（即src目录下的文件）进行的即时编译。vite使用esbuild作为编译器，可以快速地将高级语法（如TypeScript、JSX、CSS预处理器等）转换为浏览器可执行的代码，并支持Source Map、HMR等特性。vite单文件编译的原理是，当浏览器请求某个源文件时，vite会拦截该请求，并根据文件类型和后缀名来调用相应的esbuild插件来进行编译，并将编译后的结果返回给浏览器。这样，浏览器就可以直接执行该文件，而无需等待整个项目打包完成。

优势：编译速度提升了10-100x 劣势：不支持类型检查；不支持语法降级到ES5

  1. 代码压缩 代码压缩是指在生产环境中对项目代码进行优化和精简的过程，目的是减少代码体积，提高代码性能，节省网络带宽。 Esbuild作为默认压缩工具，替换传统的Terser、Uglify.js等压缩工具

  2. 插件机制 插件机制是指vite允许开发者通过安装或编写插件来扩展vite的功能或定制化vite的行为。插件本质上是一个JavaScript对象，它可以定义一些钩子函数（Hook Functions），来在vite的不同阶段执行一些操作或逻辑。在Vite中

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

1.5 Vite进阶路线

1.5.1 深入双引擎

esbuild的官方文档：[esbuild.github.io/] esbuild的入门教程：[www.youtube.com/watch?v=6mt…] rollup的官方文档：[rollupjs.org/guide/en/] rollup的入门教程：[www.youtube.com/watch?v=zye…]

推荐学习顺序：

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

1.5.2 Vite 插件开发

  1. 为什么要插件开发？
  • 抽离核心逻辑，易于扩展
  1. Vite 插件开发的步骤：
  • 创建一个JavaScript文件，导出一个函数或对象作为插件。
  • 在函数或对象中定义一些钩子函数（Hook Functions），来在vite的不同阶段执行一些操作或逻辑。
  • 在vite.config.js中导入并使用该插件。
  • 在package.json中添加该插件的相关信息，如名称、版本、描述等。
  • 发布该插件到npm或其他平台，或者在本地使用该插件。
  1. 参考资料

1.5.3 代码分割（拆包）

代码分割（Code Splitting）是指将一个大的代码文件拆分为多个小的代码文件的过程，目的是实现按需加载，提高应用的性能和用户体验。

1.5.4 JS编译工具（babel）

JS编译工具（Babel）是一个JavaScript的转换器，它可以将高级语法（如ES6+、JSX等）转换为低级语法（如ES5等），以实现浏览器或其他环境的兼容性。Babel的工作原理是：

解析：将源代码转换为AST（抽象语法树），并进行词法分析和语法分析。 转换：根据配置或插件来对AST进行修改或替换，实现语法转换或优化。 生成：将转换后的AST重新生成为目标代码，并添加一些辅助代码或注释。

补充： babel和Vite关系不大，但是是一个前端工程化必须要学习的东西

参考资料如下：

1.5.5 语法安全降级

语法安全降级是指在使用高级语法时，考虑到低版本浏览器或其他环境的兼容性问题，而采用一些低级语法或替代方案来实现相同或类似的功能或效果。

参考资料：

1.5.6 服务器渲染SSR

服务器渲染SSR（Server-Side Rendering）是指在服务器端对页面进行渲染，并将渲染后的HTML字符串发送给浏览器的过程，目的是提高首屏渲染速度，提升SEO效果，改善用户体验。

参考资料：

1.5.7.了解底层标准：CJS规范，ESM规范，HTTP2.0特性等等

参考资料：

1.5.8 vite社区生态：官方提供的部分插件

vite社区生态是指vite周围形成的一系列的资源、工具、插件、框架、教程、案例等，它们可以帮助开发者更好地使用和学习vite，也可以让开发者参与到vite的贡献和改进中。 github上这个还在维护

海量社区插件

avatar
文章
阅读
粉丝