vite为什么会启动非常快

已于 2024-02-27 15:21:36 修改
阅读量153 收藏
点赞数 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
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vscode-vite：VS Code中的Vite快一步
03-03
Vite快一步 :high_voltage: 打开项目后立即启动开发服务器 :rocket: 无需离开编辑器即可预览/调试应用 opening在打开新项目时提示快速安装节点模块（ npm i yarn pnpm i ） :package: 一键式构建和服务 :...
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-...
vite为什么快
zhoukaibai的博客
05-17 460
Vite 的快速主要得益于两个方面：
Vite 为什么启动非常快
我的博客简介
02-23 489
Vite 利用了 ES Modules 的特性，通过原生的 JavaScript 模块机制进行开发，不需要打包整个应用，而是以原生 ES Module 的形式直接加载模块。：Vite 在开发模式下利用了浏览器原生的 ES Module 支持，可以直接在浏览器中运行未经打包的代码，利用浏览器自身的模块解析能力，避免了打包过程，减少了开发环境中的构建时间，因此启动更快。：Vite 会在开发过程中缓存已经编译过的模块，当模块发生改动时，只重新编译改动的模块，而不是重新编译整个项目。
Vite为啥如此之快
weixin_44761091的博客
08-30 3380
Vite与webpack的简单对比
【vite】vite为什么比webpack快？
搬砖小鱼，请多指教呦
07-27 1805
同样的错误，他只有进入到这个页面的时候才会出现错误提示，因为vite并不会在一开始就构建你的项目，而是会把应用分为【依赖】和【源码】，对于源码部分他会根据【路由】来进行拆分，只构建一开始就必须构建的内容，同时vite以【原生ESM】的方式为浏览器提供源码，让浏览器承担了部分打包的工作，也正是因为这样的机制，不管你的项目有多大，他会先构建一开始必须要构建的内容，可能有人会疑问如果以原生esm的方式是不是以为着如果我们使用commonjs等方式无法构建？出现这个问题的原因是webpack的构建机制导致的。...
Vite 为什么比 Webpack 快？
山重水复疑无路，柳暗花明又一村。
03-28 1216
前端之所以需要类似于 Webpack 这样的构建工具，是为了提高项目的开发效率，Webpack 通过分析 js 中的 require 语句，分析出当前 js 文件所有的依赖文件，通过递归的方式层层分析后，得到整个项目的依赖关系图，对图中不同的文件执行不同的 loader，比如使用 css-loader 解析 css 代码，最后基于这个依赖关系图读取到整个项目中的所有文件代码，进行打包处理之后交给浏览器执行。这些已经预构建好的依赖，而无需再进行实时的编译或构建，从而提高了应用程序的运行速度和效率。
【包管理工具1】Vite为什么快？快在哪里？
m0_52243921的博客
10-09 1032
前端工具层出不穷，Vite亲测还不错，也支持很多插件、工具，有兴趣的小伙伴可以体验一下开发秒开的乐趣！
开发环境下，vite为什么比webpack快
大剑师兰特的GIS世界
03-30 1101
Vite 在开发环境下通过减少不必要的全量编译、高效的语言工具链以及充分利用浏览器特性，有效提升了前端开发者的开发效率和响应速度。而在生产环境打包时，Vite 可以集成 Rollup 或者 Webpack 进行优化打包，以满足生产环境的性能要求。
浅谈vite与webpack的区别及Vite为什么那么快
qq_873366938的博客
05-25 3026
Vite，webpack
（01）vite 从启动服务器开始
秋来九月八
11-21 471
Vite（发音为"veet"）是一种现代化的前端构建工具，旨在提供快速的开发体验。它由尤雨溪（Vue.js 的创始人）团队开发并维护。Vite主要用于构建基于现代 JavaScript 框架（如Vue.js、React、以及Svelte等）的应用程序。与传统的前端构建工具不同，Vite采用了一种基于ESM（ECMAScript模块）的开发服务器，利用浏览器原生支持的模块导入方式，实现了快速的冷启动和开发服务器启动的速度。
vue/vite项目 打包后本地快速启动
young_sam的博客
08-05 927
vite/vue 打包后本地启动项目快速方法
自定义文件/全局文件以重新启动Vite服务器-JavaScript开发
05-26
vite-plugin-restart自定义文件/全局重新启动Vite服务器的用法安装npm i vite-plugin-restart -D＃纱线添加vite-plugin-restart -D将其添加到v vite-plugin-restart自定义文件/ glob以重新启动Vite服务器用法安装npm...
nuxt-vite:Nuxt + Vite！ HMR太快了，它会让你的头旋转！ 加上Nuxt的所有好处
05-07
Nuxt Vite-HMR如此之快，它会让你的头旋转！ 安装： 克隆此仓库，并在项目根目录中安装deps： 安装部门： npm我＃或毛线 如果使用yarn，则可能要禁用npm postinstall脚本（通过将其更改为“ postinstallx”），...
Vite分享、原理介绍ppt
11-15
同时通过与webpack在打包等方面的对比，展示了为什么会选择vite作为前端构建工具的原因。同时本ppt还介绍了一些额外知识，如esbuild为何构建这么快、esm的定义，有多少浏览器支持esm、Monorepo、虚拟模块又是什么？...
WEB转Flutter基础学习笔记（内含vue和flutter对比）
小易不止于搬砖的博客
05-17 666
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1107
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
Unable to start ServletWebServerApplicationContext due to missing ServletWeb
s_sos0的博客
05-14 494
Unable to start ServletWebServerApplicationContext due to missing ServletWeb
解决 SpringBoot 的 Date、LocalDateTime 变成时间戳和数组的问题，创建自定义对象消息转换器
最新发布
shijialeya
05-18 377
解决 SpringBoot 的 Date、LocalDateTime 变成时间戳和数组的问题，创建自定义对象消息转换器进行数据格式化。
vite为什么比webpack快
05-30
ESM在加载模块时是异步的，可以避免不必要的模块解析和编译，减少了启动时间。此外，Vite还采用了基于浏览器原生ES模块的开发模式，通过利用浏览器的缓存机制，在开发环境下实现了快速的热重载，进一步提高了开发...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值