初识vite工具

vite

https://cn.vitejs.dev
官网

vite由两部分组成

开发服务器，基于原生ES模块提供了丰富的内建功能，HRM的速度非常快。

一套构建指令，使用rollup打开我们的代码，并且预配置，可以输出生成环境的优化过的j静态资源。

浏览器已经支持原生的esmodule

启动在live-server。
但是有缺陷，比如vue文件等等·，而且假如我们引入了loadsh-es这个库，使用的时候，浏览器会对第三方库的加载加载很多很多文件。
而比如vue ts jsx,浏览器是不能识别的，那么我们可以通过vite转化为浏览器可以识别的文件。因为原生的浏览器要么不能加载要么浪费性能，vite就是对加载文件先进行处理，比如把vue文件转化为esmodule引入，在请求的时候看上去是请求了app.vue文件，但实质上vite的connect已经做了一个转换，转换为esmodule引入，所以服务器直接响应数据就好。

vite基本使用

cnpm install vite -D
直接命令行运行npx vite 他就会找到当前目录下的index.html文件去启动一个服务器

速度是真的快。当我们引入第三方库时，如果是通过esmodule，去找到node_modules的里面的库来引用时，就会帮助我们做优化，否则的话不会做优化。
比如 import _ from ‘loadsh-es’
这样的话浏览器在加载这个库的时候，不会像上面一样加载很多很多文件。
他加载的是另一个文件，而这个文件已经被vite做了处理，他将所有文件的内容都放到这里面去了，相当于你不用再请求几百个文件了，只需要请求这一个就好。

打包css

立马起效果了。

创建style标签。
less

会立即报错没有less，当年安装后立马生效，真的快

连配置都不用。
如果想添加前缀。
cnpm install postcss postcss-perset-env -D

只需要这样配置，postcss-preset-env的功能全都能使用，非常方便。

vite默认对ts做处理

超级方便。

直接请求less ts文件，浏览器是解析不了的，connect服务器帮我们提前将less和ts编译成js文件，然后做了一个转发（重定向）将请求Less变成请求了js文件。虽然浏览器看起来是请求less，但其实服务器返回的是js代码。

可以看到都是js代码。

vite对文件资源的支持

vite 对 vue的支持

我们知道请求vue文件，实际上服务器做了重定向，返回的应该是connect帮我们转换好的js代码。那这个转换就需要用到插件，不然他不知道怎么转化。
cnpm install vite-plugin-vue2 -D
只需要这么配置，再次打包就能成功了。

热更新的话


热更新的时候只请求一个，后面的t是时间戳。

vite为什么那么快？

因为在第一次打包的时候,vite就根据我们依赖的第三方库直接进行打包，放到Node_module里面去，
然后在下次打包的时候已经有这个东西了，故不用再打包一次
可以看到，事实就是如此。

ESbuild

esbuild的构建速度比其他的构建工具快很多，这也是vite为什么这么快的原因
esbuild为什么这么快呢？

vite打包

npx vite build, 他的打包是通过rollup的。

然后使用npx vite preview,就可以对打包i的文件开启一个端口预览

vite项目开发

使用脚手架
npm init @vitejs/app


然后cd 进去npm install
然后执行npm run dev
你会发现， 真的很快
、


npm init @vitejs/app做了什么？
以前我们启动项目
第一步，npm install @vitejs/create-app -g
第二步，create-app才能启动
现在都是一步 npm init @vitejs/app(省略了create)，不需要安装第一个东西即可启动项目。