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

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的相关介绍, 可以查看掘金一篇文章,

点这里前往查看