- 💂 个人网站:[【紫陌】【笔记分享网】](http://zimo.aizhaiyu.com/)
- 💅 想寻找共同学习交流、共同成长的伙伴,[请点击【前端学习交流群】
- 文章最后有作者l联系方式(备注进群)
1. 底层的语言的选择
-
webpack是基于Node的构建,JavaScript是毫米级别。
-
vite是基于esbulid预构建依赖,esbulid是采用go语言编写的,go语言是纳秒级别。
从语言上选择,vite比用JavaScript编写的打包器快10-100倍。
2.打包策略对比
-
vite不需要经过打包,之前的浏览器不支持 ES module,在开发阶段不需要将代码打包成单个文件,而是通过预构建的方式直接加载模块。在生产环境中,Vite使用Rollup进行打包,生成优化的代码文件。
-
Webpack使用了模块打包策略,将项目中的所有模块打包成一个或多个文件,需要打包转es5然后给浏览器运行。
3. 热更新
-
webpack:模块以及模块依赖的模块需重新编译
-
vite:浏览器重新请求该模块即可。 vite请求模块时按需动态编译显示(比如a页面正常代码,b页面是错误代码,vite打开a页面是正常显示的,跳转到b页面才会错误。要是webpack的话一打开就会提示错误)
总结:vite启动的时候不需要分析各个模块之间的依赖关系、不需要打包编译。vite可按需动态编译缩减时间。当项目越复杂、模块越多的情况下,vite明显优于webpack。
4.配置复杂度:
-
Vite:Vite采用了约定优于配置的原则,减少了配置的复杂性。大多数情况下,你不需要额外的配置即可开始项目开发。它使用了默认的配置规则,支持多种语言(如JavaScript、TypeScript)和框架(如Vue、React等)的开箱即用。
-
Webpack:Webpack提供了非常灵活的配置选项,可以满足各种项目需求。然而,由于配置的灵活性,Webpack的配置相对复杂,需要更多的学习和理解。
最后:vite还存在一些小问题,比如热更新的时候控制台还有报错,需要手动刷新。webpack相对成熟,vite目前更新快。vite主打就是0配置概念。webpack配置相对多,学习成本高。