【vite】vite为什么比webpack快？

最新推荐文章于 2024-05-31 15:41:37 发布
最新推荐文章于 2024-05-31 15:41:37 发布
阅读量1.8k 收藏 8
点赞数 3
分类专栏： vite 文章标签： webpack 前端 javascript vite
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuguidian1114/article/details/126020526
版权

vite为什么比webpack快？我们举个例子

出现这个问题的原因是webpack的构建机制导致的

webpack开发构建的时候，他会默认构建你的所有页面，抓取整个应用以后提供服务，这就会导致，在你的项目中任何一个地方有一个错误（尽管你当前还未进入这个页面），这都会影响构建速度，因此你的项目越大，webpack构建时间就越长，启动速度就越慢

而对于vite来说，同样的错误，他只有进入到这个页面的时候才会出现错误提示，因为vite并不会在一开始就构建你的项目，而是会把应用分为【依赖】和【源码】，对于源码部分 他会根据【路由】来进行拆分，只构建一开始就必须构建的内容，同时vite以【原生ESM】的方式为浏览器提供源码，让浏览器承担了部分打包的工作，也正是因为这样的机制，不管你的项目有多大，他会先构建一开始必须要构建的内容，因此大大提升了构建的速度

【补充】

可能有人会疑问如果以原生esm的方式是不是以为着如果我们使用commonjs等方式无法构建？

官网给出了答案，vite会通过依赖预构建来解决这个问题

 

鱼子酱酱酱
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
wp2vite:一键让webpack项目支持vite
04-01
开发速度比webpack快80％，构建速度比webpack快50％。 React 无论是否执行弹出，都支持由react项目 支持创建的react项目 支持创建的react项目 Vue 支持由创建的vue项目，无论是否包含vue.config.js 其他 支持由...
浅谈vite与webpack的区别及Vite为什么那么快
qq_873366938的博客
05-25 3065
Vite，webpack
面试常问：为什么 Vite 速度比 Webpack 快？
web全栈开发的博客
03-14 2170
通过使用export和import语句，ES Modules 允许在浏览器端导入和导出模块。当使用 ES Modules 进行开发时，开发者实际上是在构建一个依赖关系图，不同依赖项之间通过导入语句进行关联。主流浏览器（除IE外）均支持ES Modules，并且可以通过在 script 标签中设置来加载模块。默认情况下，模块会延迟加载，执行时机在文档解析之后，触发DOMContentLoaded事件前。预构建依赖通常指的是在项目启动或构建之前，对项目中所需的依赖项进行预先的处理或构建。
vite为什么速度快
最新发布
kjl536566的博客
05-31 930
在非阻塞I/O中，当程序发起一个I/O请求（如读取文件、发送网络请求等）时，如果I/O操作不能立即完成（例如，数据还没有准备好），程序不会阻塞等待，而是立即返回并继续执行其他任务。当I/O操作完成时，程序会收到一个通知（通常是通过回调函数或事件的方式），然后可以处理I/O操作的结果。事件循环（Event Loop）和非阻塞 I/O（Non-blocking I/O）是现代异步编程模型中的两个核心概念，特别是在处理高并发或I/O密集型任务时。与传统的阻塞I/O相比，非阻塞I/O可以提高程序的并发性和响应性。
Vite为啥如此之快
weixin_44761091的博客
08-30 3419
Vite与webpack的简单对比
Vite为啥比webpack快？
m1011815213的博客
03-28 499
vite是基于esbulid预构建依赖，esbulid是采用go语言编写的，go语言是纳秒级别的。webpack是基于nodejs构建，js是以毫秒计数。
Vite 为什么比 Webpack 快？
qq_43536788的博客
03-14 572
在使用 Webpack 进行构建时，无论这些模块是否被使用，都会被打包进最终的输出文件中，这会增加构建的时间。而使用 Vite 时，只有当实际请求这些模块时，才会对它们进行编译和加载，从而节省了构建时间。需要注意的是，虽然 Vite 在开发环境下的速度很快，但在生产环境下，由于需要对代码进行压缩、优化等处理，Vite 的构建速度可能会比 Webpack 慢一些。此外，在启动开发服务器时，Webpack 需要先对整个项目进行打包，然后再启动服务器。而 Vite 则可以直接启动服务器，并按需加载和编译模块。
vite为什么编译比webpack快
weixin_45152848的博客
02-23 760
vite 中的 main.ts 中可以直接使用 import，不需要对此进行解析，不需要将 es6 转成 es5。**xxx.js、xxx.vue **中遇到 import { xxx } from “包名”，并且当包名不以。会进行字符串转换，将包地址转换为以。开头的相对或绝对路径。
若依vue3,基于webpack(非vite版本)
01-02
5. **非Vite版本的原因**：虽然Vite提供了更快的开发体验，但Webpack在生产环境的优化、兼容性和插件生态系统方面仍然更强大。对于大型项目或有特殊需求的项目，Webpack可能是更稳定的选择。 6. **若依UI框架**：若...
Vite分享、原理介绍ppt
11-15
为什么可以用 esbuild 打包代替深度遍历的过程？html 类型的文件是如何转换为js的？预购建 inclued 、exclude 的使用场景是什么？预购建是如何实现缓存判断与依赖扫描、依赖打包的？有没有预购建的影响是怎样的？...
vite-vue2-demo:vite vue2 demo, 开发环境使用vite，打包使用webpack
05-15
【vite-vue2-demo】项目是一个演示了如何在开发环境中使用Vite配合Vue2进行开发的示例，而最终的构建过程则采用Webpack完成。这个项目旨在展示Vite和Webpack在前端开发流程中的不同角色和优势。 **Vite**是由Vue.js...
vite-plugin-html-template:用于Vite的html模板，例如用于Webpack的HtmlWebpackPlugin
04-07
为什么不为所有条目html使用html模板 用法 yarn add vite-plugin-html-template // vite.config.ts import htmlTemplate from 'vite-plugin-html-template' // @see https://vitejs.dev/config/ export default ...
Vite为什么比Webpack快
不负光阴不负自己，不负被爱不负所爱 ​
03-15 1743
这些工具各有特点，适用于不同的项目需求。在选择前端构建工具时，需要根据项目的规模、复杂度以及团队的技术栈等因素进行综合考虑。vite和Webpack作为两个主流的前端构建工具，在近年来备受热议。本文章将深入讲解Vite为什么比Webpack更快的根本原因，并解析技术实现原理。
Webpack 和 Vite 对比
weixin_39273589的博客
05-09 249
而 Vite 更注重在原生支持不同框架和库上，它采用了一种基于 Rollup 的插件设计，可以很容易地集成不同的前端框架和库。Vite 在开发体验上更为优秀，它提供了实时预览和快速热更新的功能，甚至可以在开发过程中使用浏览器的调试工具进行调试。而在 Webpack 中，想要实现类似的功能需要配置比较复杂的 HMR，成本较高。Webpack 的构建速度比 Vite 快，但 Vite 在开发阶段可以很快地启动本地服务器，因此可以将一些工作放在开发阶段而不是打包阶段进行，这样可以减少构建时间，提高整体效率。
轻量迅捷时代，Vite 与Webpack 谁赢谁输
葡萄城技术团队博客
04-13 2961
你知道Vite和Webpack吗？也许有不少"程序猿"对它们十分熟悉。 Webpack Webpack是一个JavaScript应用程序的静态模块打包工具，它会对整个应用程序进行依赖关系图构建。而这也会导致一个不可避免的情况，使用Webpack启动应用程序的服务器，会花费比较长的时间——一些大型应用程序可能需要10分钟以上。 此时你心里可能已经在抓狂了，为什么会这么费时间？那就让我们一起看看基于 Webpack 包的整个工作流。 基于Webpack包的工作流 当我们保存文件时，整个JavaScript包
vite 为什么比 webpack 快？
m0_68009075的博客
05-15 214
虽然浏览器对 ESM 的支持已经很广泛了，但 Vite 还是选择在生产环境时使用 rollup 来打包，因为在生产环境下，使用未打包的 ESM 会产生比较多的 HTTP 请求，相对打包而言，效率还是比较低下的，所以 Vite 上生产依旧打包，并使用了 tree-shaking、懒加载等技巧让上生产环境的代码更加优雅。而 Vite 这类基于浏览器 ESM 形式的构建工具，利用浏览器实现了按需加载，相比打包类型的构建工具快上很多，而且随着项目的增大，热更新等也不会变慢，大大提高了开发效率。
【学习笔记】vite为什么在开发环境打包比webpack快很多
闻人放歌的三寸青草园圃
02-27 184
而webpack则是传统的需要将引用捏合打包。
vite比webpack快的原因
weixin_47560740的博客
04-18 283
通过使用export和import语句，ES Modules允许在浏览器端导入和导出模块主流浏览器均支持ES Modules，可以通过在script标签中设置type="module"来加载模块。默认情况下，模块会延迟加载，执行时机在文档解析之后，触发DOMContentLoaded事件之前。是在项目启动或构建之间，对项目中所需的依赖项进行预先的处理或构建。好处：在项目运行时，可以直接使用已经预构建好的依赖，不需要再进行实时的编译或构建。
webpack与vite对比
青山不改，绿水长流。
09-27 5203
vite开箱即用，更加简单，基于浏览器esm，使得hmr更加优秀，达到极速的效果；webpack更加灵活，api以及插件生态更加丰富。webpack是bundle，自己实现了一套模块导入导出机制。vite是利用浏览器的esm能力，是bundless。：分析各个模块之间的依赖=>然后进行编译打=>打包后的代码在本地服务器渲染。：启动服务器=>请求模块时按需动态编译显示。模块规范来执行代码，不需要打包编译成。：模块以及模块依赖的模块需重新编译。：浏览器重新请求该模块即可。模块即可在浏览器运行。
vite运行速度为什么比webpack快
06-07
Vite 之所以比 Webpack 快，主要是因为 Vite 借助了现代浏览器原生 ES 模块（ESM）的特性，在开发阶段使用了一种叫做「服务端渲染」的技术。 具体来说，Vite 在启动开发服务器时，会将所有的模块都预先编译成 ESM 格式，并通过浏览器原生的 ESM 支持，以 ES6 模块的方式直接在浏览器端运行，避免了 Webpack 在开发阶段需要将所有模块打包成一个文件的瓶颈。这样，只要你修改了一个文件，Vite 只需要重新编译这个文件，而不需要像 Webpack 那样要重新打包所有代码，因此速度更快。 此外，Vite 还使用了一种叫做「按需编译」的技术，只在需要的时候编译对应的模块，而不是像 Webpack 那样在构建时将所有模块都编译一遍，因此也可以加速开发阶段的构建速度。 总的来说，Vite 利用了现代浏览器的特性和一些优化技术，使得开发阶段的构建速度更快，从而提高开发效率。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值