vite为什么会启动非常快

已于 2024-02-27 15:21:36 修改
阅读量188 收藏
点赞数 2
文章标签： 前端 vue.js javascript
于 2024-02-26 15:31:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_66588740/article/details/136226250
版权

开发环境使用ES6 Module,无需打包——非常快

生产环境使用rollup,并不会快很多

依赖：依赖是至第三方的依赖，这部分代码一般不会改动。使用esbuild预构建依赖，esbuild使用go编写。速度比javascript编写快10-100倍。把commonjs的依赖转换为es模块。把多个esm模块转换为单个模块。这样只用请求一次

源码：借助浏览器对esm的支持，不需要打包全部的依赖，让浏览器接管打包的工作。只需要在浏览器请求源码的时进行转换并按需提供源码(不需要分析依赖，不需要编译)。打包器则是根据依赖关系打包构建整个应用之后，才提供服务，启动开发服务器。

热更新快：当一个模块更新时，只需要重新加载这个模块。而打包器还需要把这个模块的相关依赖全部重新编译

qq_66588740
关注
vscode-vite：VS Code中的Vite快一步
03-03
Vite快一步 :high_voltage: 打开项目后立即启动开发服务器 :rocket: 无需离开编辑器即可预览/调试应用 opening在打开新项目时提示快速安装节点模块（ npm i yarn pnpm i ） :package: 一键式构建和服务 :...
Vite 为什么启动非常快
我的博客简介
02-23 718
Vite 利用了 ES Modules 的特性，通过原生的 JavaScript 模块机制进行开发，不需要打包整个应用，而是以原生 ES Module 的形式直接加载模块。：Vite 在开发模式下利用了浏览器原生的 ES Module 支持，可以直接在浏览器中运行未经打包的代码，利用浏览器自身的模块解析能力，避免了打包过程，减少了开发环境中的构建时间，因此启动更快。：Vite 会在开发过程中缓存已经编译过的模块，当模块发生改动时，只重新编译改动的模块，而不是重新编译整个项目。
vite搭建three.js的开发环境
01-06
在现代Web开发中，Three.js是一个非常流行的JavaScript库，用于创建和展示3D图形。它提供了丰富的API，使得开发者能够轻松地在浏览器中构建复杂的3D场景。Vite，由Vue.js作者尤雨溪开发的新一代前端构建工具，以其...
保留vite es特性，快速接入乾坤微前端子应用.zip
02-08
【描述】中的"快应用开发"则暗示了此项目旨在加速企业级应用的开发过程，快应用通常指的是轻量级、快速启动的应用，可能是指在微前端架构下，各个子应用能独立开发、部署，从而提高开发效率和迭代速度。 【标签】...
vite-plugin-restart:自定义文件组重新启动Vite服务器
03-25
自定义文件/全局文件以重新启动Vite服务器 用法 安装 npm i vite-plugin-restart -D # yarn add vite-plugin-restart -D 将其添加到vite.config.js // vite.config.js import ViteRestart from 'vite-plugin-...
nuxt-vite:Nuxt + Vite！ HMR太快了，它会让你的头旋转！ 加上Nuxt的所有好处
05-07
Nuxt Vite-HMR如此之快，它会让你的头旋转！ 安装： 克隆此仓库，并在项目根目录中安装deps： 安装部门： npm我＃或毛线 如果使用yarn，则可能要禁用npm postinstall脚本（通过将其更改为“ postinstallx”），...
WEBRTC教程:局域网怎么调试，http://172.19.18.101:8080 ,无法访问摄像头和麦克风，请检查权限
keyboard专栏
10-25 1155
在局域网中使用 WebRTC 时，无法访问摄像头和麦克风通常是因为浏览器的安全策略限制了API 的使用。如果你在非localhost或非 HTTPS 环境下访问网页，浏览器会阻止访问摄像头和麦克风。localhost大多数浏览器允许在localhost上使用，即使没有 HTTPS。所以你可以在服务器和客户端同一台机器上使用localhost进行测试。如果你需要在局域网的 IP 地址上（如）进行访问，那么使用 HTTPS 是解决方案之一。通过配置 HTTPS，你可以避免浏览器的安全限制。使用openssl。
vue如何让下拉框可以输入---查询下拉框内容
qq_42666729的博客
10-28 461
使用filterable。
JavaScript中this的指向和改变this指向的方法 - 2024最新版前端秋招面试短期突击面试题【100道】
everfoot的博客
10-29 636
了解this的工作原理是掌握JavaScript的关键之一，特别是在编写复杂的应用程序时。正确使用this可以避免许多常见的问题和错误。在实际开发中，合理选择不同的绑定方法，可以让你的代码更加灵活和易于维护。掌握这些this的知识点将帮助你在前端面试中脱颖而出！祝你顺利上岸！
前端 常见开发工具使用
最新发布
weixin_45534301的博客
10-31 349
【代码】前端 常见开发工具使用。
CSS3新增盒子属性（三）
。
10-28 977
介绍CSS3新增盒子属性。
Google Recaptcha V2 简单使用
吴家健ken的博客
10-30 242
Google Recaptcha V2 简单使用
vue父子通讯
Jsjendndn的博客
10-28 290
下面是子组件子组件使用Props发送。
【源码+文档】基于SSM小区物业管理系统【提供源码+答辩PPT+参考文档+项目部署】
计算机项目定制开发&项目外包服务
10-27 728
作者简介：✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流。✌主要内容：🌟Java项目、Python项目、前端项目、PHP、ASP.NET、人工智能与大数据、单片机开发、物联网设计与开发设计、简历模板、学习资料、面试题库、技术互助、就业指导等。🌟。
JavaScript 前端开发
A_aspectJ的博客
10-27 491
JavaScript是一种广泛应用于前端开发的脚本语言，它赋予了网页动态化和交互性的能力。前端开发作为构建用户界面的重要一环，对于任何希望在互联网上有所作为的个体或组织来说都至关重要。JavaScript，作为前端开发的核心语言，凭借其强大的功能和灵活的特性，成为了现代前端开发者不可或缺的工具。
ThreeJs 中如何实现动画效果
qq_34820371的博客
10-28 529
在 ThreeJs 中实现基础的动画效果非常简单。通过使用 requestAnimationFrame 创建渲染循环，你可以轻松实现物体的旋转、位置变化和其他动画效果。掌握这些基础知识后，你可以进一步探索更复杂的动画技术，例如利用 Tween.js 进行平滑过渡，或结合物理引擎实现逼真的物理动画。
.NET Core WebApi第4讲：控制器、路由
weixin_54966200的博客
10-28 609
在API里面，我们把每一个方法叫做action请求行为，把方法叫做行为（行为的英文是action）。为什么能把方法叫行为？——之前学类的时候，人吃喝拉撒睡、 跑步都是你这个人的一个行为。
Canvas字体高度计算与PDF高度如何统一
aa_qq110的专栏
10-31 203
如果前端使用Canvas生成图片，后面使用nodejs生成PDF，但PDF中没有计算boundingBoxAscent 和boundingBoxDescent的方法，这时可以简单将字的高度前后台统一为字体高度，而不使用基线的方式计算。请懂的大神指出有没有什么问题，有没有更好的方式。
【Web.路由】——路由约束
weixin_42031602的博客
10-28 216
一个介绍路由约束的文章（asp.net core)
vite为什么比webpack快
05-30
ESM在加载模块时是异步的，可以避免不必要的模块解析和编译，减少了启动时间。此外，Vite还采用了基于浏览器原生ES模块的开发模式，通过利用浏览器的缓存机制，在开发环境下实现了快速的热重载，进一步提高了开发...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值