vite和webpack的区别（多层面分析）

•   个人网站:[【紫陌】【笔记分享网】](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配置相对多，学习成本高。