大前端备战2021年，使用vite构建React !

写在开头

• 由于 vite这个构建工具被用在了vue3上门，而且它的构建思路我觉得优于webpack,底层也是使用了esbuild,性能上更优

• 那么为了照顾一些小伙伴之前没有学习过vite的，我们先来看看什么是vite

什么是vite

• Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用,支持热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打包

• vite的天然优势：

• • 快速冷启动服务器

  • 即时热模块更换（HMR）

  • 真正的按需编译

vite工作原理

• 当声明一个 script 标签类型为 module 时

如：  <script type="module" src="/src/main.js"></script>

• 浏览器就会像服务器发起一个GET http://localhost:3000/src/main.js请求main.js文件：

// /src/main.js:
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

• 浏览器请求到了main.js文件，检测到内部含有import引入的包，又会对其内部的 import 引用发起 HTTP 请求获取模块的内容文件

• 如：GET http://localhost:3000/@modules/vue.js

• 如：GET http://localhost:3000/src/App.vue

• 其Vite 的主要功能就是通过劫持浏览器的这些请求，并在后端进行相应的处理将项目中使用的文件通过简单的分解与整合，然后再返回给浏览器渲染页面，vite整个过程中没有对文件进行打包编译，所以其运行速度比原始的webpack开发编译速度快出许多

简单实现vite

• 由于代码量有一些大，我就不自己去写了，直接拿了别人的代码过来，原文地址是: