【学习笔记】vite为什么在开发环境启动比webpack快很多

已于 2024-07-22 15:40:29 修改
阅读量227 收藏
点赞数 1
分类专栏： 学习笔记 文章标签： 学习 笔记 webpack vite
于 2024-02-27 10:15:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huyijian1314/article/details/136315413
版权

原因就在于vite使用了ESModule，而webpack则是传统的需要将引用捏合打包。如何实现的呢？其实很简单

<script src="./main.js" type="module"></script>
  • 开发环境使用ES6 Module，无需打包——非常快
  • 生产环境使用rollup，并不会快很多
闻人放歌
关注
专栏目录
vite-vue2-demo:vite vue2 demo, 开发环境使用vite，打包使用webpack
05-15
【vite-vue2-demo】项目是一个演示了如何在开发环境中使用Vite配合Vue2进行开发的示例，而最终的构建过程则采用Webpack完成。这个项目旨在展示Vite和Webpack在前端开发流程中的不同角色和优势。 **Vite**是由Vue.js...
面试题——为什么vite打包速度比webpack快
qq_62035394的博客
03-28 603
基于Go语言编写的esbuild, Go语言是纳秒级别的, Node.js是毫秒级别的, 因此, vite在打包速度上相比webpack有。预购建依赖指的是在项目启动或构建之前, 对项目中所需的依赖项进行预先的处理或预建, 当项目实际运行时, 可以直接使用这些已经预购建好的依赖。关于热更新的处理, 当一个模块或其依赖的模块内容发生改变时, 需要重新编译这些模块, 而在vite中, 只需要重新请求该模块即可。的支持, 将开发环境下的模块文件直接作为浏览器要执行的文件。
Vite为啥如此之快
weixin_44761091的博客
08-30 3658
Vite与webpack的简单对比
【vite】vite为什么比webpack快？
搬砖小鱼，请多指教呦
07-27 1915
同样的错误，他只有进入到这个页面的时候才会出现错误提示，因为vite并不会在一开始就构建你的项目，而是会把应用分为【依赖】和【源码】，对于源码部分他会根据【路由】来进行拆分，只构建一开始就必须构建的内容，同时vite以【原生ESM】的方式为浏览器提供源码，让浏览器承担了部分打包的工作，也正是因为这样的机制，不管你的项目有多大，他会先构建一开始必须要构建的内容，可能有人会疑问如果以原生esm的方式是不是以为着如果我们使用commonjs等方式无法构建？出现这个问题的原因是webpack的构建机制导致的。...
vite 为什么比 webpack 快？
m0_68009075的博客
05-15 255
虽然浏览器对 ESM 的支持已经很广泛了，但 Vite 还是选择在生产环境时使用 rollup 来打包，因为在生产环境下，使用未打包的 ESM 会产生比较多的 HTTP 请求，相对打包而言，效率还是比较低下的，所以 Vite 上生产依旧打包，并使用了 tree-shaking、懒加载等技巧让上生产环境的代码更加优雅。而 Vite 这类基于浏览器 ESM 形式的构建工具，利用浏览器实现了按需加载，相比打包类型的构建工具快上很多，而且随着项目的增大，热更新等也不会变慢，大大提高了开发效率。
Vite 打包体积分析，性能提升不再困扰
热门推荐
程序员秋风的博客
10-19 1万+
其实这个问题最好改成 rollup 打包体积分析，但是为什么我会取这个名字呢？其实这主要是由于我的习惯性引起的，因为太久没用一个东西，如果遇到问题，肯定会去围绕它自身去进行搜索。 例如遇到 vite 打包分析相关问题，就会在 google 搜索，vite build analyzer 然后就打开第一个 issues。 然后才反应过来，哦，怎么把 vite 是用 rollup 打包给忘记了呢。这也许会被有些读者嘲讽，“Vite 用 rollup 打包，这都不会？”，但是对于这部分户读者，我想提个问题，高
vite搭建three.js的开发环境
01-06
在命令行中运行以下命令启动Vite的开发服务器： ``` npx vite ``` 浏览器会自动打开`http://localhost:3000`，显示一个空白页面。由于我们目前只设置了基本的3D场景，所以页面上不会有任何内容。接下来，我们...
基于Vue3、TypeScript和Vite的现代化前端开发学习资源源码
11-02
本项目是一款基于Vue3、TypeScript和Vite构建的现代化前端开发学习资源源码，包含299个文件，涵盖99个SVG图标、83个TypeScript类型定义、42个Vue组件、18个SCSS样式表、9个JSON配置文件等，旨在为学习Vue3、...
电子测量中的航天测控推出虚拟仪器测试开发环境—VITE2.0
11-25
虚拟仪器测试开发环境VITE2.0是北京航天测控技术开发公司针对电子测量领域推出的一款创新性测试解决方案。这款平台旨在满足现代测试系统对于开放性、通用性和可互换性的高要求，以适应从产品研发到生产制造再到使用...
终于搞明白，vite为什么比webpack快了！运行原理、构建方式等方面到底有什么不同！
SmileLife123的博客
09-28 419
1.前端常见工具之间的定位与联系，如webpack、rollup、vite、esbuild、vue-cli等。 2.从运行原理、构建方式、HMR热更新机制、使用成本等方面逐一去分析，vite与webpack之间的差异。
vite 和 webpack 的区别
huangyuting98的博客
09-28 866
vite 和 webpack 的区别
【包管理工具1】Vite为什么快？快在哪里？
m0_52243921的博客
10-09 1114
前端工具层出不穷，Vite亲测还不错，也支持很多插件、工具，有兴趣的小伙伴可以体验一下开发秒开的乐趣！
vite构建打包性能优化
富朝阳的博客
12-06 8816
最近在用vite构建重构我的博客，由于项目内容较多，所以遇到了一些性能问题，所以在构建生产环境时做了一些优化，在这里做一个记录，方便大家参考。
Vite打包速度为什么比webpack快，打包的优劣势在哪里？
贝格前端工场的博客
06-26 766
大家都有被webpack打包速度搞崩溃的时候，修改一处地方，想预览效果，要等上半天。
webpack + vite 前端构建工具
2302_79523175的博客
07-13 952
->-->
Unity类银河战士恶魔城学习总结（P130 SkillTree UI 技能树）
最新发布
suzh1qian的博客
11-17 546
本章节实现了设置。
EEG+EMG学习系列 (1) :一个基于小波的自动睡眠评分模型
走在深度学习前沿的小宋
11-14 920
由于手动睡眠阶段评分方法的限制，创建自动睡眠阶段分类的需求已经上升。在这项研究中，使用`双通道单极脑电图 （EEG）`、`下巴肌电图 （EMG）` 和`双通道眼电图 （EOG）` 信号开发了一种新的机器学习模型。使用`最佳正交滤波器组`，通过分解 30 s 信号纪元来获得子带。然后根据这些子带的系数计算 `Tsallis 熵`。然后，这些特征被馈送到一个`集成袋装树 （EBT） 分类器`，用于自动睡眠分类。
Vue3学习：查询城市天气预报案例（vite，选项式）
wangyining070205的博客
11-13 818
前几日的学习中，实现了查询城市天气预报，是用组合式实现的，今天是用选项式来实现，案例运行效果如下： 如果不输入城市的名字，直接点击“查询”，将会显示IP所在地城市的天气预报。 代码如下： <template> <div id="container"> <div id="search"> <el-input v-model="cityName" placeholder="请输入城市名" class="inputText
从零开始学习 sg200x 多核开发之 uboot 网络功能使能
燕十三的物联网之旅
11-16 309
sophpi u-boot 默认未开启网络功能，需要手动开启，为了在 u-boot 下可以通过 tftp 下载固件，先测试 u-boot 下网络功能。
vite为什么比webpack快
05-30
Vite相对于Webpack的优势在于它在开发环境下采用了ESM（ES6模块）作为模块引入方式，而不是像Webpack一样采用了CommonJS规范。ESM在加载模块时是异步的，可以避免不必要的模块解析和编译，减少了启动时间。此外，Vite还采用了基于浏览器原生ES模块的开发模式，通过利用浏览器的缓存机制，在开发环境下实现了快速的热重载，进一步提高了开发效率。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值