模板网站开发营销,wordpress讨论组,网站 设计 语言,wordpress伪静态404错误前言
最近作者在学习 webpack 相关的知识#xff0c;之前一直对这个问题不是特别了解#xff0c;甚至讲不出个123....#xff0c;这个问题在面试中也是常见的#xff0c;作者在学习的过程当中总结了以下几点#xff0c;在这里分享给大家看一下#xff0c;当然最重要的是…前言
最近作者在学习 webpack 相关的知识之前一直对这个问题不是特别了解甚至讲不出个123....这个问题在面试中也是常见的作者在学习的过程当中总结了以下几点在这里分享给大家看一下当然最重要的是要理解这样回答的时候就不用死记硬背了。
原因
1、开发模式的差异
在开发环境中Webpack 是先打包再启动开发服务器而 Vite 则是直接启动然后再按需编译依赖文件。大家可以启动项目后检查源码 Sources 那里看到
这意味着当使用 Webpack 时所有的模块都需要在开发前进行打包这会增加启动时间和构建时间。
而 Vite 则采用了不同的策略它会在请求模块时再进行实时编译这种按需动态编译的模式极大地缩短了编译时间特别是在大型项目中文件数量众多Vite 的优势更为明显。
Webpack启动 Vite启动 2、对ES Modules的支持
现代浏览器本身就支持 ES Modules会主动发起请求去获取所需文件。Vite充分利用了这一点将开发环境下的模块文件直接作为浏览器要执行的文件而不是像 Webpack 那样先打包再交给浏览器执行。这种方式减少了中间环节提高了效率。
什么是ES Modules
通过使用 export 和 import 语句ES Modules 允许在浏览器端导入和导出模块。
当使用 ES Modules 进行开发时开发者实际上是在构建一个依赖关系图不同依赖项之间通过导入语句进行关联。
主流浏览器除IE外均支持ES Modules并且可以通过在 script 标签中设置 typemodule来加载模块。默认情况下模块会延迟加载执行时机在文档解析之后触发DOMContentLoaded事件前。 3、底层语言的差异
Webpack 是基于 Node.js 构建的而 Vite 则是基于 esbuild 进行预构建依赖。esbuild 是采用 Go 语言编写的Go 语言是纳秒级别的而 Node.js 是毫秒级别的。因此Vite 在打包速度上相比Webpack 有 10-100 倍的提升。
什么是预构建依赖
预构建依赖通常指的是在项目启动或构建之前对项目中所需的依赖项进行预先的处理或构建。这样做的好处在于当项目实际运行时可以直接使用这些已经预构建好的依赖而无需再进行实时的编译或构建从而提高了应用程序的运行速度和效率。
4、热更新的处理
在 Webpack 中当一个模块或其依赖的模块内容改变时需要重新编译这些模块。
而在 Vite 中当某个模块内容改变时只需要让浏览器重新请求该模块即可这大大减少了热更新的时间。
总结
总的来说Vite 之所以比 Webpack 快主要是因为它采用了不同的开发模式、充分利用了现代浏览器的 ES Modules 支持、使用了更高效的底层语言并优化了热更新的处理。这些特点使得 Vite在大型项目中具有显著的优势能够快速启动和构建提高开发效率。 前端面试题库 面试必备 推荐★★★★★
地址前端面试题库
