首页 > 其他分享 >面试题——为什么vite打包速度比webpack快

面试题——为什么vite打包速度比webpack快

时间:2024-03-28 13:59:50浏览次数:20  
标签:面试题 浏览器 Modules webpack 内核 模块 vite

vite采用了不同的开发模式,  相较于webpack的先打包再启动服务器,  vite则是直接启动,  在请求模块时再进行实时编译,  在大型项目中,  这种按需动态编译的模式极大地缩短了时间

vite充分利用了现代浏览器对ES Modules的支持,  将开发环境下的模块文件直接作为浏览器要执行的文件

  • ES Modules 通过使用export和import语句在浏览器端导入和导出模块,  主流浏览器(除IE外)均支持ES Modules,  并且可以通过在script标签中设置 type = "modules" 来加载模块
  • "五大浏览器  四大内核"
  1. Chrome:blink内核
  2. safari:webkit内核
  3. IE:trident内核
  4. firefex:gecko内核
  5. opera:blink内核

webpack是基于Node.js构建的,  而vite是基于esbuild进行预构建依赖,  基于Go语言编写的esbuild,  Go语言是纳秒级别的,  Node.js是毫秒级别的,  因此,  vite在打包速度上相比webpack有10-100倍的提升

  • 预购建依赖指的是在项目启动或构建之前,  对项目中所需的依赖项进行预先的处理或预建,  当项目实际运行时,  可以直接使用这些已经预购建好的依赖

关于热更新的处理,  当一个模块或其依赖的模块内容发生改变时,  需要重新编译这些模块,  而在vite中,  只需要重新请求该模块即可

最后,  关于esbuild的相关介绍, 可以查看掘金一篇文章,

点这里前往查看

标签:面试题,浏览器,Modules,webpack,内核,模块,vite
From: https://blog.csdn.net/qq_62035394/article/details/137108863

相关文章

  • webpack 3 入门笔记
    生产/开发环境生产环境便于开发求方便开发环境便于部署求小体积小项目:用环境名if(evn===proudtion){}else{}大项目:dev(mergecommon),prod(mergecommon)三个文件通过script指令rundev和runbuild--config不同的配置文件。****开发环境:1公共变量2tr......
  • React— React面试题按照学习顺序持续更新
    1.React的特点采用组件化模式,命名式编码,提高代码复用率;在ReactNative中可以使用react语法进行移动端开发使用虚拟DOM(v-dom)和diff算法,减少DOM和浏览器的交互2.babel在React的作用ES6语法转ES5,如箭头函数、模板字符串、解构赋值等。Babel可以将这些高级语法转换为浏览器能......
  • webpack入门2
    插件机制自动处理某些事情,而loader只是转换文件成js.webpack也为插件提供了平台,当然也可以自己修改默认配置plugin.config.js.比loader命题机制更广,plugin自定实现某些功能。利用class()的钩子。webpack的开发环境1http环境:可以看到页面。liveserverDEserverhttpServe......
  • 【Flutter 面试题】 Dart 是不是单线程模型?是如何运行的?
    【Flutter面试题】Dart是不是单线程模型?是如何运行的?文章目录写在前面口述回答补充说明示例:异步编程示例:使用Isolates处理计算密集型任务总结写在前面......
  • 【前端面试题-13】目前主流的几种图片格式以及特性和使用场景
    目前主流的图片格式及其特性和使用场景包括:JPEG(.jpg):特性:JPEG是一种有损压缩格式,能够大幅度减少文件大小,但压缩过程中会有一定的图像质量损失。它支持渐进式显示,即先呈现低质量预览再逐渐加载高清晰度版本。使用场景:JPEG适用于需要较小文件尺寸的照片、网页图片、......
  • 【Flutter 面试题】讲解一下Flutter中的动画和过渡效果
    【Flutter面试题】讲解一下Flutter中的动画和过渡效果文章目录写在前面口述回答补充说明运行结果详细说明写在前面......
  • 2024年Java面试题汇总手册(持续更新版)
    简化图如下所示现在假设由于某种原因,employee-producer公开的服务会抛出异常。我们在这种情况下使用Hystrix定义了一个回退方法。这种后备方法应该具有与公开服务相同的返回类型。如果暴露服务中出现异常,则回退方法将返回一些值。6、什么是Hystrix断路器?我们需要它吗?......
  • 2024年Java高分面试指南横空出世!1000道面试题+300W字解析
    42、java中有没有指针?43、java中是值传递引用传递?44、实例化数组后,能不能改变数组长度呢?45、假设数组内有5个元素,如果对数组进行反序,该如何做?46、形参与实参区别47、构造方法能不能显式调用?48、什么是方法重载?49、构造方法能不能重写?能不能重载?50、内部类......
  • 14道MyBatis面试题总结,看完你还敢说懂MyBatis吗?
    Dao接口,就是人们常说的Mapper接口,接口的全限名,就是映射文件中的namespace的值,接口的方法名,就是映射文件中MappedStatement的id值,接口方法内的参数,就是传递给sql的参数。Mapper接口是没有实现类的,当调用接口方法时,接口全限名+方法名拼接字符串作为key值,可唯一定位一个MappedS......
  • 面试题 16.01. 交换数字
    题目链接:本题要求不能借助临时变量交换\(a\)和\(b\)的值,应想到借助异或运算的性质。本题亦是异或运算的一个经典应用。a=a^b;//记a^b的值为cb=b^a=b^(a^b)=a^(b^b)=a^0=a;a=a^b=(a^b)^a=b^(a^a)=b;即实现了两个数的交......