vite&webpack区别
-
编译方式不同
- webpack在编译过程中，会将所有模块打包为一个bundle.js文件，然后再运行这个文件。
- vite在开发模式下，没有打包的步骤，它利用了浏览器对ES Module的原生支持，只有在真正需要时才编译文件。在生产模式下，vite使用Rollup进行打包，提供更好的tree-shaking，代码压缩和性能优化。
-
开发效率不同
- webpack的热更新是全量更新，即使修改一个小文件，也会重新编译整个应用，这在大型应用中可能会导致编译速度变慢。
- vite的热更新是增量更新，只更新修改的文件，所以即使在大型应用中也能保持极快的编译速度。
-
热更新机制
- webpack热更新需要整个模块链重新打包和替换，对于大型项目可能会有延迟。
- vite热更新只会针对改动的模块进行更新，提高了更新速度。
- webpack 与vite的热更新对比起来，两者都是建立 socket 联系，但是两者不同的是，webpack是通过 bundle.js 的 hash 来请求变更的模块，进行热替换。vite是根据自身维护 HmrModule ，通过文件类型以及服务端对文件的监听给客户端发送不同的 message，让浏览器做出对应的行为操作。
-
构建结果不同
- Webpack 的构建结果更加优化，它可以将多个文件合并为一个或多个文件，并且可以对这些文件进行压缩和代码分割等优化操作。这种优化操作可以使得应用程序的加载速度更快，但也会增加构建时间和调试难度。
- Vite的构建结果更接近于源代码，因为它是在运行时进行编译和构建的。这意味着，Vite 可以更快地生成构建结果，并且可以更快地检测到代码的变化。此外，Vite 的构建结果也更易于调试和排查错误。
-
扩展性不同
- webpack有着成熟的插件生态，几乎可以实现任何你想要的功能，扩展性非常强，如代码分割、压缩、混淆、静态资源管理等
- vite虽然也支持插件，但相比webpack的生态还有一些距离，它也有一些有用的插件，如 Vite-plugin-Vue、Vite-plugin-React、Vite-plugin-CSS 等。
-
应用场景不同
- webpack由于其丰富的功能和扩展性，适合于大型、复杂的项目。
- vite凭借其轻量和速度，更适合于中小型项目和快速原型开发。
问题一、Vite打包为什么比Webpack快？
webpack在编译过程中，会将所有模块打包为一个bundle.js文件，然后再运行这个文件。在修改代码后都需要对整个项目进行重新编译，然后重新生成大量的代码和资源文件。而在Vite中，它使用了浏览器原生的ES模块加载器，当开发者修改代码后，Vite会即时在浏览器中编译和打包代码，然后将更改的部分直接传递给浏览器，并重新加载这部分代码。因此，Vite的编译和打包速度比Webpack更快，因为它避免了重复的编译和打包步骤，以及更高效地利用了现代浏览器的功能。另外，Vite还使用了缓存机制和按需加载的方式，这也是它快速打包的原因之一。当开发者第一次访问项目时，Vite会对项目进行编译和打包，并缓存生成的文件。这样，当开发者下一次打开项目时，Vite只需要编译和打包发生更改的部分，而不需要重新编译和打包整个项目。这种按需加载的方式也能够进一步提高Vite的打包速度。
问题二、为什么vite启动比webpack快，但运行慢？而webpack启动比vite慢，但是首屏快？
- 因为vite是直接启动开发服务器，请求哪个模块再对该模块进行实时编译。而webpack会先打包，然后启动开发服务器，请求服务器时直接给予打包结果。生产环境没有差别，主要是开发环境。
- 由于现代浏览器本身就支持ES Module，会自动向依赖的Module发出请求。vite充分利用这一点，将开发环境下的模块文件，就作为浏览器要执行的文件，而不是像webpack那样进行打包合并。
- 由于vite在启动的时候不需要打包，也就意味着不需要分析模块的依赖、不需要编译，因此启动速度非常快。当浏览器请求某个模块时，再根据需要对模块内容进行编译。这种按需动态编译的方式，极大的缩减了编译时间，项目越复杂、模块越多，vite的优势越明显。 在HMR方面，当改动了一个模块后，仅需让浏览器重新请求该模块即可，不像webpack那样需要把该模块的相关依赖模块全部编译一次。
- 当需要打包到生产环境时，vite使用传统的rollup进行打包，因此，vite的主要优势在开发阶段。另外，由于vite利用的是ES Module，因此在代码中不可以使用CommonJS。
webpack原理图参考
vite原理图参考
