构建工具是什么

1、企业开发中可能涉及以下内容：
TypeScript：tsc
Vue/React：vue-complier、react-complier
Less/Sass：less-loader、sass-loader
语法降级：babel
体积压缩：uglifyjs
浏览器只认识css、js、html，每次修改代码都需要通过以上工具将所有代码重新编译一遍，非常麻烦，Vite帮我们解决了这个问题。
2、直接支持从node_modles中引包，解决CommonJs模块化和ES6模块化不兼容的问题。
3、热更新
4、自带开发服务器，解决跨域问题。

Vite对比WebPack

WebPack：分析出文件的所有导入与导出，将CommonJs模块化和ES6模块化通过webpack_require函数变成统一的模块化代码，并包裹成立即执行函数。这意味着它将所有的文件都读了一遍，项目启动速度会非常慢，但是可以兼容浏览器端和服务器端。
Vite：基于ES6模块化不支持CommmonJs模块化（新版本好像支持了），所以不需要把所有文件都读一遍，启动速度非常快。

Vite脚手架和Vite的区别

当执行：

1	yarn create vite

帮我们全局安装create-vite
直接运行bin目录下的执行配置
关系：create-vite内置了vite，就像vue-cli内置了webpack一样，create-vite配置模板并设置最佳实践的配置。

Vite预加载

问题1：当我们打开一个网页，浏览器会通过查询有多少个es6引入与导出来确定发出多少请求来获取.js文件（commonjs没这个要求，因为commonjs是工作在node环境下的），当引入和导出的文件数很多时，浏览器就会发出多个网络请求，这很离谱。
问题2：npm安装的包会通过层层向上的方式进行查找，在开发环境中当然没问题，但是生产环境中必须使用相对路径或绝对路径，这种机制就不太好用了。
问题3：不同第三方包的导入和导出形式不同，有些是commonjs模块化有些是es模块化。
Vite做了一些处理：
Vite会找到对应依赖，然后调用esbuild将其他规范代码转为es规范代码，然后放到当前目录下/node_modules中，解决了不同的第三方包的导出格式不同的问题，由于将所有的包都打包到node_modules中方便路径补全与重写。
Vite将导入和导出的代码集成到一个或几个文件中，解决了网络多包传输的性能问题。