Vite-前端构建工具

---

前言

Vite，Esbuild，Rollup介绍

---

一、vite介绍

Vite是一种新型前端构建工具，能够显著提升前端开发体验。vite有两种环境：开发环境和生产环境，开发环境时用esbuild来进行预构建依赖，生产环境使用Rollup 来打包。

• 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
• 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

二、vite的好处

Vite 通过在一开始将应用中的模块区分为 依赖 和 源码 两类，改进了开发服务器启动时间。

• 依赖 大多为在开发时不会变动的纯JavaScript。一些较大的依赖（例如有上百个模块的组件库）处理的代价也很高。依赖也通常会存在多种模块化格式（例如 ESM 或者CommonJS）。
• Vite 将会使用 esbuild 预构建依赖。Esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快10-100 倍.

三、Esbuild简单介绍

中文文档：https://esbuild.bootcss.com/
注意: esbuild有两个关键的API:transfrom 和 build

transform API

主要用于对单个文件或代码片段进行转换。它通常用于开发环境，当你需要快速编译和转换 JavaScript、CSS、TypeScript 等文件时非常有用。transform 允许你指定输入代码（可以是字符串或文件路径），并接收转换后的代码作为结果。它支持多种选项，如 loader（指定文件类型，如 ‘js’、‘ts’、‘css’ 等）、minify（是否压缩输出）、sourceMap（是否生成 source map）等。

示例代码：

const esbuild = require('esbuild');  
 
esbuild.transform('console.log("Hello world!");', {  
 loader: 'js',  
 minify: true,  
 sourceMap: true,  
}).then(result => {  
 console.log(result.code); // 转换后的代码  
 console.log(result.map); // source map  
}).catch(() => {  
 process.exitCode = 1;  
});

build API

与 transform 相比，build API 旨在处理整个构建过程，包括编译、打包、压缩等。它更适合于生产环境，能够处理多个文件之间的依赖关系，生成最终可以部署的静态资源。build API 允许你通过配置文件或编程方式指定入口文件、输出目录、插件、loader、minify 选项等。

示例代码：

const esbuild = require('esbuild');  
 
esbuild.build({  
 entryPoints: ['src/index.ts'],  
 bundle: true,  
 minify: true,  
 outfile: 'out/bundle.js',  
}).catch(() => {  
 process.exitCode = 1;  
});

四、vite的依赖预构建

Vite 的预构建主要实现以下两个目的：

1. 由于 Vite 在开发阶段将所有代码视为原生 ES 模块，因此需要将 CommonJS 或 UMD 格式的依赖转换为 ESM 格式，以确保代码可以在现代浏览器中正确运行。
2. 通过预构建将多个内部模块的 ESM 依赖关系转换为单个模块，减少了网络请求的数量，从而提高了页面加载速度。

预构建的实现过程

1.缓存判断：

• Vite 在每次预构建之后都会将一些关键信息写入到 _metadata.json 文件中。
• 第二次启动项目时，Vite 会通过这个文件中的 hash 值来进行缓存的判断。如果 hash
  值一致，则不会进行后续的预构建流程，直接跳过以节省时间。

2.依赖扫描：

• 如果没有命中缓存，Vite 会正式进入依赖预构建阶段。但在此之前，Vite 会先探测项目中存在哪些依赖，收集依赖列表，即进行依赖扫描。
• 依赖扫描过程主要通过 Esbuild 提供的 build 方法实现，但此时并不实际写入产物到磁盘，以节省磁盘 I/O 时间。

3.预构建过程：

• Vite 通过其内部插件 esbuildScanPlugin 遍历所有的入口文件，解析出依赖列表，并进行预构建。
• 预构建过程是通过 Vite 的 optimizeDeps 函数触发的，该函数首先检查 _metadata.json 文件，如果文件不存在或hash 值不一致，则执行预构建。
• 预构建的核心是使用 Esbuild 的 transform 和 build API 来转换和打包文件。

4.合并与转换第三方依赖：

• 在依赖扫描和收集完成后，Vite 会通过 Esbuild 的 build 方法，指定第三方依赖为入口点，进行合并和转换操作。
• 转换后的内容会输出到 node_modules/.vite/deps/ 目录下，供后续的开发过程使用。

5.开发过程中的处理：

• 在开发过程中，当浏览器请求某个模块时，Vite 会拦截这些请求，并根据请求的内容进行相应的处理
• 如果是已经预构建过的模块，Vite 会直接从缓存中返回转换后的内容；如果是新的或未预构建的模块，Vite 会动态地进行转换并返回给浏览器。

图片分析过程

这个是合并打包在编译

无需打包直接编译

五、打包Rollup

1. 打包配置

在Vite项目中，Rollup的打包配置通常通过Vite的配置文件（如vite.config.js或vite.config.ts）来设置。Vite允许你通过build选项来自定义Rollup的打包行为。

• 入口文件：你需要指定打包的入口文件（或文件们）。在Vite配置中，这通常通过build.rollupOptions.input来设置，但在Vite的常规使用中，入口文件通常是通过项目的index.html或特定的入口.js文件来隐含指定的.
• 输出配置：输出配置包括输出文件的名称、格式、目录等。在Vite中，这可以通过build.outDir（输出目录）和build.rollupOptions.output（Rollup的输出选项）来设置。
• 插件：Rollup允许使用插件来扩展其功能。在Vite中，你可以通过build.rollupOptions.plugins来添加Rollup插件，或者通过Vite插件系统来间接使用Rollup插件。

2. 打包过程

当你运行npm run build或yarn build等命令时，Vite会执行以下步骤来打包你的项目：

• 解析依赖：Vite会分析你的入口文件及其依赖，包括JavaScript、CSS、图片等资源文件。
• 代码转换：对于JavaScript代码，Vite会使用Rollup及其插件（可能还包括Babel等）来进行代码转换，包括ES6+到ES5的降级、压缩、Tree
  Shaking等。
• 资源处理：对于CSS、图片等资源文件，Vite会使用相应的插件（如rollup-plugin-css-only、@rollup/plugin-image等）来处理这些文件，确保它们能够被正确地包含在最终的打包文件中。
• 生成输出：最后，Vite会将处理后的代码和资源文件打包成一个或多个bundle文件，并将它们放置在指定的输出目录中。

---

总结

通过上述步骤和策略，可以显著提高Vite的构建效率和项目性能。不过，需要注意的是，每个项目的具体情况和需求都不同，因此需要根据实际情况进行选择和调整。