vite介绍

1.简介

webpack —》市场份额大,生态相对来说非常成熟

vite: 是vue团队的官方出品，同时vue-cli会在后面的版本中将vite作为预设构建工具。作为一个思维比较前卫而且先进的构建工具,解决了一些webpack解决不了的问题，已经有一些大厂在使用vite去构建项目。未来使用vue-cli去构建vue项目的时候你要写的vue.config.js不再是webpack的配置而是vite的配置(目前只基于浏览器项目)

Vite也支持直接构建react，angular，svelte项目。

2.Vite相对于webpack的优势

当我们开始构建越来越大型的应用时，需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍，我们开始遇到性能瓶颈 一 使用 JavaScrpt 开发的工具通常需要很长时间( 甚至是几分钟!)才能启动开发服务器。

即使使用热更新，文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复，迟钝的反馈会极大地影响开发者的开发效率和幸福感。 起因:我们的项目越大 ----》构建工具( webpack )所要处理的js代码就越多 [跟webpack的一个构建过程( 工作流程)有关] 造成的结果:构建工具需要很长时间才能启动开发服务器(启动开发服务器 --》把项目跑起来)

vite和webpack各有所长：vite是基于es modules的，侧重点不一样，webpack更多的关注兼容性，而vite关注浏览器端的开发体验。

区别：

Vite 在一个特殊的 import.meta.env 对象上暴露环境变量，Vue-CLI 是基于webpack，它是在 process.env 上挂载的。
此外，还有一个不同点是，原来的 vue.config.js 是能直接通过 process.env 拿到环境变量的，vite.config.js 却不能直接拿到，需要开发者自己调用 loadEnv 加载。
还有 Vite 只暴露以 VITE_ 开头的环境变量给客户端，Vue-CLI 中是 VUE_APP_ 开头

3.什么是构建工具？

首先浏览器只认识html，css，js，而项目里可能会具备以下内容：

typescript:如果遇到ts文件我们需要使用tsc将typescript代码转换为js代码；
React/Vue: 安装react-compiler / vue-complier，将我们写的jsx文件或者.vue文件转换为render函数；
less/sass/postcss/component-style: 我们又需要安装lss-loader，sass-loader等一系列编译工具；
语法降级: babel —》将es的新语法转换旧版浏览器可以接受的语法；
体积优化: uglifyjs，terser等 —> 将我们的代码进行压缩变成体积更小性能更高的文件。
…在修改代码的时候就需要重新去运行各个部分的东西。构建工具的作用就是来完成以上内容。代码一变化 —》构建工具就去帮我们自动去tsc，react-compiler，less，babel，uglifyjs全部换个走一遍 —》js，让开发者只去关注写的代码。

4.构建工具做的工作：

横块化开发支持:支持直接从node_modules里引入代码 +多种模块化支持；

处理代码兼容性:比如babel语法降级，less,ts 语法转换(不是构建工具做的，构建工具将这些语法对应的处理工具集成进来自动化处理)；

提高项目性能:压缩文件，代码分割；

优化开发体验:构建工具会帮你自动监听文件的变化，当文件变化以后自动帮你调用对应的集成工具进行重新打包，然后再浏览器重新运行(整个过程叫做热更新，hot replacement）

开发服务器:跨域的问题，用vue-cli，react-cli，create-react-element解决跨域的问题。

市面上主流的构建工具有哪些:

webpack
vite
parceles
build
rollup
grunt
gulp

5.vite的依赖预构建：

依赖预构建*:首先vite会找到对应的依赖，然后调用esbuild(对js语法进行处理的一个库)，将其他规范的代码转换成esmodule规范，然后放到当前目录的node_modules/.vite/deps，同时对esmodule规范的各个模块进行统一集成, 解决了3个问题:

不同的第三方包会有不同的导出格式(这个是vite没法约束人家的事情)
对路径的处理上可以直接使用。vite/deps，方便路径重写
叫做网络多包传输的性能问题(也是原生esmodule规范不敢支持node modules的原因之一)，有了依赖预构建以后无论他有多少的额外export 和import，vite都会尽可能的将他们进行集成最后只生成一个或者几个模块(防止导入所有的相关依赖包，导致性能问题)

6.* vite的配置：

环境变量配置

代码环境可能有以下环境:

1.开发环境 2测试环境 3.预发布环增 4.灰度环填 5.生产环填

举个例子:百度地图sdk，小序的sdk APP_KEY: 测试环境和生产还有开发环境是不一样的key -开发环境:110 生产环境:111 测试环境: 112 我们去请求第三方sdk接口的时候需要带上的一个身份信息 前端在和后端对接的时候，前端在开发环填中请求的后端API地址和生产环境的后端API地址肯定不是同一个。

在vite中的环境变量处理: vite内置了dotenv这个第三方库，dotenv会自动读取.env文件并解析这个文件中的对应环境变量 并将其注入到process对象下

为了适应多种开发环境，设置了多种环境下的配置文件

vite.base.config.js 基础公共配置文件

vite.prod.config.js 生产环境配置文件

vite.dev.config.js 开发环境配置文件

vite.example.config.js 配置举例文件

vite.example.config.js 内容：

// 配置demo
import { defineConfig } from “vite”;
export default defineConfig({
optimizeDeps: {
exclude: [],//将指定数组中的依赖不进行依赖预构建
},
envPrefix: “ENV”, //配置vite注入客户端环境变量校验的env前缀
})

vite,config.js内容：

import {defineConfig, loadEnv} from “vite”;
import viteBaseConfig from “./vite.base.config”;
import viteProdConfig from “./vite.prod.config”;
import viteDevConfig from “./vite.dev.config”;
​
//策略模式
const envResolver = {
//生产环境配置
“build”😦) => ({…viteBaseConfig,…viteProdConfig}),
//开发环境配置
“serve”() => Object.assign({}, viteBaseConfig, viteDevConfig),
//Object.assign(viteBaseConfig, viteDevConfig)相较于上面的，
//这种可能会修改了viteBaseConfig文件中的内容，采用上面的防止更改
}
​
export default defineConfig(({command, mode}) => {
// console.log(“process”, process.env)
const env = loadEnv(mode, process.cwd(), “”)
console.log(“env”, env)
// console.log(“mode”, mode)
return envResolvercommand
})

*:为什么vite,config.js可以书写成esmodule的形式，这是因为vite他在读取这个vite,config.js的时候会事先node去解折文件语法，如发现你是esmodule规范会直接将你的esmodule规范进行替换变commonjs规范。

当我们调用loadenv的时候，他会做如下几件事: 1.直接找到.env文件不解释，并解析其中的环境安量，并放进一个对象里 2.会将传进来的mode这个变量的值（如：development）进行拼接：找到.env.development文件去取对应的配置文件并进行解析，并放进一个对象里

模拟流程如下：

运行开发环境 npm run dev

读取到.env文件配置和环境是development

读取.env.development配置内容

可以理解为

const baseEnvConfg = 读取.env的配置
const modeEnvConfg 读取env相关配置
const lastEnwConfg = { …baseEnwConfig, …modeEnvConfig }

.env.development文件的作用： 项目启动的时候可以指定运行环境，如 npm run dev，npm run build（需要在文件在配置）

在客户端，vite会将对应的环境变量注入到import.meta.env里去。为了防止我们将隐私性的变量直接送进import.meta.env中，所以他做了一层拦载，如果你的环境交量不是以VITE开头的，他就不会注入到客户端中去，如果想更改这个前缀，可以去使用envPrefix配置

运行的时候可以通过import.meta.env来获取内容

以上内容主要参考b站视频：https://www.bilibili.com/video/BV1GN4y1M7P5?p=10

vue cli 转vite参考链接：

https://juejin.cn/post/7119455615840092173#heading-18