1.常见的构建工具 _变量

一.Vite诞生 1.常见的构建工具2.为什么选 Vite 现实问题
问题：当开发大型项目, 使用构建工具, 会使项目启动十分缓慢
原因：因为支持多模块代码，这样它就会在项目启动时，去所有的文件中寻找相关模块代码进行转变,当项目比较小，并无感觉，但当项目比较大时，处理的会非常多，项目启动速度只会越来越慢
缓慢的服务器启动
基于打包器()的开发服务器，必须优先抓取并构建你的整个应用，然后才能提供服务。
基于 ESM(vite)的开发服务器，会将应用中的模块分为原码和依赖两类
依赖：一般为大型不可变的文件，其中也会又有多种模块语法，如果在服务器启动时处理这些代码代价十分高
Vite 将会使用预构建依赖。使用 Go 编写，并且比以编写的打包器预构建依赖快 10-100 倍。
源码：通常包含一些并非直接是的文件，需要转换（例如 JSX，CSS 或者 Vue/ 组件），时常会被编辑。同时，并不是所有的源码都需要同时被加载（例如基于路由拆分的代码模块）。
Vite 以原生 ESM 方式提供源码。这实际上是让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。
缓慢的更新
一些打包器的开发服务器会在应用发生变化时重新构建整个项目，这样会使开发效率极大的降低
在 Vite 中，HMR 是在原生 ESM 上执行的。当编辑一个文件时，Vite 只需要精确地使已编辑的模块与其最近的 HMR 边界之间的链失活[1]（大多数时候只是模块本身），使得无论应用大小如何，HMR 始终能保持快速更新。
Vite 同时利用 HTTP 头来加速整个页面的重新加载（再次让浏览器为我们做更多事情）：源码模块的请求会根据 304 Not进行协商缓存，而依赖模块请求则会通过 Cache-: max-age=, 进行强缓存，因此一旦被缓存它们将不需要再次请求。
二.Vite模块 1.依赖预构建
和 UMD 兼容性: 开发阶段中，Vite 的开发服务器将所有代码视为原生 ES 模块。因此，Vite 必须先将作为或 UMD 发布的依赖项转换为 ESM 。
当转换依赖时，Vite 会执行智能导入分析，这样即使导出是动态分配的（如 React），按名导入也会符合预期效果：
// 符合预期import React, { useState } from 'react'
性能： Vite 将有许多内部模块的 ESM 依赖关系转换为单个模块，以提高后续页面加载性能。
一些包将它们的 ES 模块构建作为许多单独的文件相互导入。例如，-es 有超过 600 个内置模块！当我们执行{} from ‘-es’ 时，浏览器同时发出 600 多个 HTTP 请求！尽管服务器在处理这些请求时没有问题，但大量的请求会在浏览器端造成网络拥塞，导致页面的加载速度相当慢。
通过预构建 -es 成为一个模块，我们就只需要一个 HTTP 请求了！
依赖预构建常用的配置：
import { defineConfig } from 'vite'export defalut defineConfig({optimizeDeps: {exclude: [] // 在预构建中强制排除的依赖项include: [] // 默认情况下，不在 node_modules 中的，链接的包不会被预构建。使用此选项可强制预构建链接的包}})
2.环境变量和模式
所有构建工具的环境变量设定都是基于这个插件进行操作的，vite也不例外。
:是一个零依赖的模块，它能将环境变量中的变量从 .env 文件加载到 .env 中
【1.常见的构建工具】而在vite中进行了处理，将环境变量加载到.meta.env中，vite还提供了一些默认的环境变量供我们使用，如: