# 什么是vite Vite (法语意为 "快速的"，发音 /vit/)，新型前端构建工具。
# 为什么用vite 一句话总结：使用vite构建项目，启动的速度要比使用webpack构建更快。 - 之前浏览器是不支持ES Modules的，为了在让浏览器能够运行我们写的代码（es6语法、.jsx/.vue文件），我们需要使用打包工具，例如webpack，来实现代码的转换和优化的过程； - 在浏览器支持ES Modules后，import、export、``` ``` 启动项目，vite会启动一个dev server，来实现对前端访问请求的监听。
浏览器会向服务器发起一个GET请求，拿到index.tsx文件：
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/89eccc0d9e9f49518c7b16b847c2d488~tplv-k3u1fbpfcp-zoom-1.image) ```javascript // http://localhost:3000/src/index.tsx请求index.tsx文件： // /src/index.tsx文件 import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render( , document.getElementById('root') ) ``` 浏览器看到index.tsx文件内部含有import，就会对其import引用发起HTTP请求获取该模块的内容文件：
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a72d2ee3b36d40f9b45c3334c8fdf554~tplv-k3u1fbpfcp-zoom-1.image)
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b561cb3d37b54666af368aff9dc00a55~tplv-k3u1fbpfcp-zoom-1.image)
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f477a56686ff4a3a8abf7b026c750a87~tplv-k3u1fbpfcp-zoom-1.image)
当你访问一个页面，他就会对当前页面的引用模块进行一个递归的请求，而和当前页面无关的模块则不会去请求，这样来实现**按需加载**。
整个过程大概如下：
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e5e6ef96343144008a748f435b7edf2a~tplv-k3u1fbpfcp-zoom-1.image)

对于引用的模块，vite将其分为了 **依赖** 和 **源码** 两类，对其进行不同的处理。

先来看一下对于源码的处理。我们打开请求的App.tsx文件，可以看到里面的内容已经不是源码了，而是经过处理后的代码。 ```javascript // App.tsx import React from 'react' function App() { return (

11111

) } export default App; ``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d08a702101fa4dae9fdc480f8fee6c8e~tplv-k3u1fbpfcp-zoom-1.image)
我们点开Headers，可以看到返回到文件类型已经是javascript：
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/640df0ed12e74c30a8084d272b3033bc~tplv-k3u1fbpfcp-zoom-1.image)

从这我们也可以看出，vite在返回源码时，已经对源码做了一层处理，编译为浏览器可以运行的代码。实际上，对于不同的文件后缀，比如.ts、.vue、.tsx、.jsx，vite都会对其做不同的处理。下面是来自官网的内容： #### vue文件 - Vue 3 单文件组件支持：[@vitejs/plugin-vue](https://github.com/vitejs/vite/tree/main/packages/plugin-vue) - Vue 3 JSX 支持：[@vitejs/plugin-vue-jsx](https://github.com/vitejs/vite/tree/main/packages/plugin-vue-jsx) - Vue 2 支持：[underfin/vite-plugin-vue2](https://github.com/underfin/vite-plugin-vue2) #### .ts文件对于.ts文件，vite天然支持，其内部使用**esbuild**将TypeScript 转译到 JavaScript。
#### .jsx文件、.tsx文件 JSX 的转译同样是通过 **esbuild**，默认为 React 16 风格。
#### css文件导入 .css 文件将会把内容插入到