vite与webpack的区别,vite凭什么比webpack启动速度快那么多?

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

下面详细来说:
  • webpack先打包,再启动开发服务器,请求服务器时直接给予打包后的结果;
  • vite直接启动开发服务器,请求哪个模块再对哪个模块进行实时编译;
  • 由于现代浏览器本身就支持ES Modules,会主动发起请求去获取所需文件。vite充分利用这点,将开发环境下的模块文件,就作为浏览器要执行的文件,而不是像webpack先打包,交给浏览器执行的文件是打包后的;
  • 由于vite启动的时候不需要打包,也就无需分析模块依赖、编译,所以启动速度非常快。当浏览器请求需要的模块时,再对模块进行编译,这种按需动态编译的模式,极大缩短了编译时间,当项目越大,文件越多时,vite的开发时优势越明显;
  • 在HRM方面,当某个模块内容改变时,让浏览器去重新请求该模块即可,而不是像webpack重新将该模块的所有依赖重新编译;
  • 当需要打包到生产环境时,vite使用传统的rollup进行打包,所以,vite的优势是体现在开发阶段,另外,由于vite使用的是ES Module,所以代码中不可以使用CommonJs;
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容