前端 vite 的原理

时间：2024-03-05 12:00:25浏览次数：26

标签：浏览器前端编译 webpack 打包原理 ESM vite

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

为何使用 vite

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

原理

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

webpack

vite

标签：浏览器,前端,编译,webpack,打包,原理,ESM,vite
From： https://www.cnblogs.com/guanchaoguo/p/18053688

vite项目使用websocket通讯封装
项目使用vue3+piniaimport{defineStore}from'pinia';import{getCurrentInstance}from'vue';exportconstuseSocketStore=defineStore('socket',()=>{const{proxy}=getCurrentInstance();constwsUrl=proxy.$......
面试官：说说SpringAOP实现原理？
AOP（Aspect-OrientedProgramming，面向切面编程）是一种编程技术，它允许开发者在不改变现有代码的情况下，增加新的功能或行为，这些功能或行为被称为“切面”。AOP可以通过预编译方式和运行期动态代理的方式来实现，它的主要目的是降低业务逻辑的耦合性，提高程序的可重用性和开发效率。AOP......
javaweb03-前端工程
Ajax异步的Javascript和XML数据交换异步交互：在不重载页面的情况下，与服务器交换数据并更新部分网页Axios入门前后端分离开发需求分析->接口定义->前后端并行开发->测试->前后端联调开发YAPI接口管理平台前端工程化规范化、标准化前端开发环境准备vue-cli脚手架Vu......
git原理性概念
参考资料近期学习git内部概念及原理，为了加强效果和日后回忆，还是写了这篇笔记进行输出。参考资料如下：这才是真正的Git——Git内部原理-LZANE|李泽帆（靓仔）《VersionControlwithgit》实验环境：unbuntu18objects（blobstreecommitstag）&hashgit里的object有四种：tree......
vite+vue3 遇到报错 Uncaught SyntaxError: Cannot use import statement outside a m
按照报错找到了对应的位置import{createApp}from'/node_modules/.vite/deps/vue.js?v=d0a669cf'importAppfrom'/src/pages/project1/App.vue'//import'./index.css'//importrouterfrom"./router"//createApp(App).mount(&#......
BOSHIDA DC电源模块的工作原理及应用
BOSHIDADC电源模块的工作原理及应用DC电源模块是一种常见的电子元件，它具有将交流电转换为直流电的功能。在很多电子设备中，尤其是需要稳定的直流电源供应的设备中，DC电源模块被广泛应用。 DC电源模块的工作原理可以简单描述如下：将输入的交流电转换为直流电。首先，交流电输入到......
【个人前端笔记】web性能优化：连接复用
一、连接复用keep-alive当我们去连接www.baidu.com的时候，会经历以下过程（没有连接复用）连接过程：发起TCP连接---->请求资源----->下载资源---->关闭TCP连接---->再次发起TCP连接.....如果有多个资源需要请求，我们就要发起tcp然后关闭tcp连接，然后再发起和关闭如果可以发起一次tcp......
【个人前端笔记】Event loop和微任务与宏任务
一、EventloopEventloop是指在node.js的事件循环，不是在浏览器中二、Eventloopd各个阶段┌───────────────────────┐┌─>│timers│timers阶段：这个阶段执行setTimeout和setInterval的回调函数。│└───────......
【个人前端笔记】Node.js技术架构
一：node.js不是什么1.node.js不是web框架或后端框架所以你不能把Node.js与Flask或Spring对比2.node.js不是编程语言node.js并不是后端的JS，它只是以.js做后缀的所以你不能把Node.js与Python或PHP对比二：node.js是什么1.node.js是一个平台它将多种技术组合起来让Javascript也......
【个人前端笔记】手写EventHub
一、EventHubEventHub是对发布-订阅模式的一种实现。它是一种集中式事件处理机制，允许不同的模块之间进行彼此通信而又不需要相互依赖，达到一种解耦的目的。二、EventHub优缺点优点：1.通过EventHub实现所有模块之间通信的技术。在vue2中可以用事件总线实现任意组件间传递数据2.E......

前端 vite 的原理

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

为何使用 vite

原理

webpack

vite

相关文章

赞助商

阅读排行