程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2023-06(2)

webpack和vite的区别 webpack和vite的区别

发布于2023-03-17 05:52     阅读(881)     评论(0)     点赞(14)     收藏(3)


开发阶段vite的速度远快于webpack,主要是因为:
webpack是先打包再启动开发服务器,vite是直接启动开发服务器,然后按需编译依赖文件。

下面详细来说:

  • webpack先打包,再启动开发服务器,请求服务器时直接给予打包后的结果;
  • vite直接启动开发服务器,请求哪个模块再对哪个模块进行实时编译;
  • 由于现代浏览器本身就支持ES Modules,会主动发起请求去获取所需文件。vite充分利用这点,将开发环境下的模块文件,就作为浏览器要执行的文件,而不是像webpack先打包,交给浏览器执行的文件是打包后的;
  • 由于vite启动的时候不需要打包,也就无需分析模块依赖、编译,所以启动速度非常快。当浏览器请求需要的模块时,再对模块进行编译,这种按需动态编译的模式,极大缩短了编译时间,当项目越大,文件越多时,vite的开发时优势越明显;
  • 在HRM方面,当某个模块内容改变时,让浏览器去重新请求该模块即可,而不是像webpack重新将该模块的所有依赖重新编译;
  • 当需要打包到生产环境时,vite使用传统的rollup进行打包,所以,vite的优势是体现在开发阶段,另外,由于vite使用的是ES Module,所以代码中不可以使用CommonJs;

什么是vite

Vite (法语意为 "快速的",发音 /vit/),新型前端构建工具。

为什么用vite

一句话总结:使用vite构建项目,启动的速度要比使用webpack构建更快。

  • 之前浏览器是不支持ES Modules的,为了在让浏览器能够运行我们写的代码(es6语法、.jsx/.vue文件),我们需要使用打包工具,例如webpack,来实现代码的转换和优化的过程;
  • 在浏览器支持ES Modules后,import、export、<script type='modules'>等成为vite出现的条件;
  • vite 主要对应的场景是开发模式,它只启动一台静态页面的服务器,对文件代码不打包,服务器会根据客户端的请求加载不同的模块处理;
  • 底层实现上,Vite 是基于 esbuild 预构建依赖的。当声明一个script标签类型为module时,浏览器将对其内部的import引用发起HTTP请求获取模块内容;
  • Vite 劫持了这些请求,并在后端进行相应的处理(如处理.ts文件为.js文件),然后再返回给浏览器;
  • 由于浏览器只会对用到的模块发起 HTTP 请求,所以 Vite 没必要对项目里所有的文件先打包后返回,而是只编译浏览器发起 HTTP 请求的模块即可。也就实现了所谓的按需加载。


参考:

webpack和vite的区别 - 简书

vite介绍 | 与其他构建工具做比较,分析vite预构建和热更新的原理 - 掘金




所属网站分类: 技术文章 > 博客

作者:天使的翅膀

链接:http://www.qianduanheidong.com/blog/article/505491/ab6a04ebfd578f54d4af/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

14 0
收藏该文
已收藏

评论内容:(最多支持255个字符)