【学习心得】工程化篇 Webpack和Vite对比分析

这几天阅读了大量的关于Webpack和Vite的文章，我发现有一些文章还是很不错，讲的非常仔细。下面给大家重点推荐4篇博客：

然后接下来我再梳理一下自己的知识脉络。

Webpack，Vite是什么？

Webpack ：Webpack是一个用于现代JavaScript应用程序的静态模块打包工具。它会在内部构建一个依赖图，此依赖图对应映射到项目所需的每个模块，并生成一个或多个bundle。通过使用plugin和loader，Webpack可以高度定制化，满足不同项目的需求。

Vite ：Vite是一个下一代的前端开发和构建工具，它主要针对现代前端框架，如Vue、React等。与传统的构建工具不同，Vite利用了现代浏览器的原生ES模块支持，实现了极快的冷启动时间。它采用了ESBuild进行预构建，极大地提高了构建速度。

Webpack和Vite对比

运行原理

Webpack：

开发环境 ：Webpack通过分析入口文件（如webpack.config.js中的entry）构建依赖图，然后将所有模块打包成一个或多个bundle文件。每次代码变更时，Webpack需要重新打包并生成新的bundle，这个过程相对较慢。
生产环境：在生产环境中，Webpack会进行更复杂的优化，包括代码拆分、压缩、去除未使用的代码等，以生成体积更小、加载更快的bundle文件。
底层架构 ：Webpack是基于node.js开发的，但JavaScript只能单线程运行，无法利用多核CPU的优势，当项目越来越大时，构建速度也就越来越慢了。

Vite：

开发环境：Vite直接利用浏览器的ES模块支持，开发服务器在启动时几乎不需要打包，直接按需加载模块。对于依赖库，Vite会进行预构建并缓存，以提升后续的加载速度。
生产环境：在生产环境中，Vite使用Rollup进行打包和优化，生成高效的bundle文件。Rollup的打包方式更轻量，适合现代前端框架的需求。
底层架构 ：Vite所使用的esbuild是用go语言编写的，可以充分利用多核CPU的优势，所以vite开发环境下的预构建与按需编译速度更快。根据实测数据，Esbuild在构建速度上通常比Webpack快10-100倍。

冷启动差异

Webpack ：通过从入口文件entry开始，递归地构建出整个应用的依赖图。它使用各种loader和loader处理不同类型的文件，并将它们打包成一个或多个优化过的 bundle 文件。

Vite ：Vite 通过原生 ES 模块的支持，直接加载模块而无需打包。在首次启动时，Vite 会预构建依赖项，并缓存这些预构建的结果以提升启动速度。

小细节：Vite虽然冷启动速度更快，但是Vite会出现首屏加载变慢的问题，由于 unbundle 机制，Vite`首屏期间需要额外做其它工作。而Webpack打包好之后就可以直接呈现了。不过冷启动是包括打包和加载这两个过程的，因此整体看下来还是Vite的冷启动速度更快。

热更新差异

Webpack：

文件监控：Webpack 使用文件系统监听监控文件变化。
重新编译：当文件发生变化时，Webpack 会重新编译受影响的模块。
HMR Server ：Webpack 的开发服务器（如 webpack-dev-server）通过 WebSocket 通知浏览器。
模块更新：浏览器接收到更新通知后，通过 HMR 机制只替换变更的模块，而不刷新整个页面。

Vite：

文件监控：Vite 也使用文件系统监听监控文件变化。
模块更新：当文件发生变化时，Vite 利用浏览器原生的 ES 模块系统，只更新变更的模块，无需重新编译整个应用。
HMR Server：Vite 通过 WebSocket 通知浏览器更新，浏览器通过 ESM 动态导入更新模块。

为什么Vite更快

编译方式不同：Webpack 的 HMR 涉及重新编译，这对于大型项目会带来显著的性能开销。而 Vite 只需更新变更模块，不涉及重新编译，速度更快。

模块依赖处理：Webpack 需要解析复杂的依赖关系，Vite 则利用 ES 模块的特性，依赖关系更清晰简洁，减少了解析和编译时间。

预构建优化 ：Vite 在启动时预构建依赖，缓存模块（Vite对于node_modules的文件做了强缓存，而对我们编写的源码做了协商缓存），减少了热更新时的开销。Webpack 需要实时编译，无法充分利用缓存优化。

生产环境差异

Webpack：

打包方式：Webpack在生产环境中会预先打包所有代码和依赖。这包括对所有模块进行静态分析，生成一个或多个优化后的bundle文件。这些文件包含了项目中所需的所有资源，确保在部署时可以高效加载。
插件和加载器：
- 丰富的插件生态系统：Webpack拥有庞大的插件生态系统，支持各种文件类型和第三方库，通过插件可以实现代码压缩、资源优化等多种功能。这使得Webpack非常适合复杂项目和大型应用。
- 自定义配置：开发者可以根据项目需求编写复杂的配置文件，灵活控制打包过程中的各个环节。

Vite：

打包方式：Vite在生产环境中使用Rollup进行打包。Rollup擅长处理模块化代码，并能生成优化后的bundle文件。Rollup的高效性使得Vite在生产环境下也能快速构建。
开发与生产环境不一致：
- 开发环境：Vite利用浏览器原生的ES模块进行开发，不需要预先打包所有模块，直接加载未打包的源代码。这样在开发时，启动速度极快，模块热更新（HMR）几乎是即时的。
- 生产环境：生产环境下，Vite使用Rollup进行完整打包和优化，这与开发环境的处理方式不同，可能导致开发环境和生产环境的打包结果不一致。
插件和零配置：
- 插件生态系统：尽管Vite的插件生态系统还在成长中，但已经支持许多主流框架和工具，通过插件可以实现TypeScript支持、JSX编译等功能。
- 零配置：Vite提倡零配置设计理念，默认配置已经能够满足大部分需求，开发者可以快速上手。需要时也可以通过简单的配置文件进行大型项目的定制。

使用成本

Webpack：

学习曲线：Webpack的配置和插件系统非常强大，但也相对复杂，需要开发者花费较多时间来学习和配置。对于新手而言，Webpack的复杂性可能是一个挑战。
配置时间：为了充分利用Webpack的所有功能，开发者通常需要编写大量配置文件。这些配置文件包括加载器（Loaders）、插件（Plugins）和其他构建选项，初始设置可能比较耗时。
生态系统：Webpack拥有一个庞大且成熟的生态系统，支持各种文件类型和第三方库。对于大型和复杂项目，Webpack的灵活性和扩展性非常有用。

Vite：

上手难度：Vite采用"零配置"设计理念，默认配置已经能够满足大部分需求，初学者可以快速上手。只需进行少量配置即可开始开发。
开发体验：Vite在开发环境中利用原生ES模块和即时编译技术，实现了极快的启动速度和模块热更新（HMR），极大地提升了开发体验和效率。
生态系统：虽然Vite的生态系统还在成长中，但已经支持许多主流框架和工具。通过插件机制，Vite可以轻松集成TypeScript、JSX等功能，满足现代前端开发需求。

Webpack和Vite的优缺点总结

Webpack

优点：

丰富的插件和加载器：Webpack拥有一个庞大且成熟的生态系统，支持各种文件类型和第三方库。通过插件和加载器，Webpack可以高度定制化，满足各种复杂项目的需求。
代码分割和树摇： Webpack支持代码分割和动态导入，能够将应用分成多个小块按需加载，减少初始加载时间。同时，利用树摇技术移除未使用的代码，生成更小的bundle文件，提高性能。
自定义配置：Webpack的配置选项非常丰富，开发者可以根据项目需求编写复杂的配置文件，灵活控制打包过程中的各个环节。

缺点：

学习曲线陡峭：Webpack的配置和插件系统虽然强大，但也相对复杂，需要开发者花费较多时间来学习和配置，特别是对新手来说，可能是一个挑战。
构建速度较慢：由于Webpack是基于单线程的Node.js开发的，随着项目规模的增大，构建速度会明显变慢，特别是在大型项目中，每次重新打包都需要较长时间。

Vite

优点：

快速启动和热更新：Vite利用浏览器原生的ES模块进行开发，启动速度极快，并且通过即时模块热更新（HMR）提供快速的反馈和极高的开发效率。
零配置： Vite采用"零配置"设计理念，默认配置已经能够满足大部分需求，初学者可以快速上手。需要时也可以通过简单的配置文件进行高级定制。
生产环境优化： Vite在生产环境中使用Rollup进行打包，Rollup擅长处理模块化代码，并能生成优化后的bundle文件，确保在生产环境中的高效加载。

缺点：

开发与生产环境不一致：Vite在开发环境和生产环境中使用不同的打包方式（开发环境使用原生ES模块，生产环境使用Rollup），这可能导致两者的打包结果不一致，增加了调试和维护的难度。
插件生态系统尚在成长：尽管Vite的插件生态系统正在快速成长，但相比Webpack来说，仍然不够成熟，可能在某些特定需求上缺乏相应的插件支持。