前端 vite 的原理

很多前端框 VUE React 都是使用webpack 打包

为何使用 vite

• webpack 打包很慢，热更不友好
• 一个模块的变化导致整个项目的重新编译
• vite 真正的按需加载: 利用浏览器ESM支持，实现真正的按需加载

原理

• 由于ES6的在浏览器的支持ESM
• 可以只实现在浏览器直接使用import 发送 http 请求
• Vite启动一个 koa 服务器拦截这些请求，并且文件通过简单的分解与整合，然后再以ESM格式
• 整个过程无需打包编译
• 将这个过程编译和运行分离，在运行时可以执行预编译 可以重新构建预编译和执行
• 使用浏览器原生支持的 ES 模块系统来解析和处理代码

编译和运行时分离

• 编译时： 在编译阶段，将代码转换为浏览器可以直接执行的格式，包括处理模块化依赖、解析 import 语句等
• 运行时： 动态加载模块，根据需要从服务器请求模块，并实时编译和执行这些模块。每个模块都会在需要时按需被请求和编译，而不是一次性加载整个应用程序

webpack

vite