关于vite的使用

weixin_54938190

已于 2024-06-13 15:18:14 修改

阅读量581

点赞数

文章标签：前端

于 2022-11-12 18:43:38 首次发布

本文链接：https://blog.csdn.net/weixin_54938190/article/details/127600372

版权

（【性能优化篇】分包策略_哔哩哔哩_bilibili）

webpack和vite的相同点以及不同点：

相同点：

现代化打包工具：webpack和vite都是现代化的前端打包工具，用于将前端资源（如JavaScript、CSS、图片等）进行打包、转换和优化，以提高前端应用的性能。
模块化支持：两者都支持模块化开发，能够将代码拆分成多个模块，实现代码的复用和维护。
支持多种资源：无论是JavaScript、CSS、图片还是其他类型的资源，webpack和vite都能够进行打包和优化。

不同点：

构建速度：
- webpack：在构建速度上，webpack相对较慢。尤其是在开发环境下，webpack需要分析模块依赖、编译打包后才能交给本地服务器进行渲染。随着模块的增多，webpack打包后的bundle体积可能会过大，导致热更新速度变慢。
- vite：vite的构建速度比webpack快得多。vite基于esbuild预构建依赖，esbuild采用go语言编写，操作是纳秒级别，而js是以毫秒计数，因此vite比用js编写的打包器快10~100倍。vite采用先启动开发服务器，然后在请求某个模块时对该模块进行实时编译的方式，这种方式可以显著减少编译时间，提高开发效率。
开发体验：
- webpack：在开发过程中，webpack需要重新打包才能看到更新，这可能会降低开发效率。
- vite：vite支持热更新，可以在开发过程中实时更新页面，无需重新打包，大大提高了开发体验。
配置复杂度：
- webpack：webpack的配置相对复杂，需要手动配置各种loader和plugin，以满足不同的构建需求。
- vite：vite的配置相对简单，只需要配置少量的选项即可。vite的设计理念是专注于开发环境下的快速构建，因此它的配置更加简洁和直观。
生态系统：
- webpack：webpack的生态系统非常成熟，拥有大量的loader和plugin可供选择，能够满足各种复杂的构建需求。
- vite：vite的生态系统相对较新，可选的插件和工具相对较少。但是，随着vite的不断发展，其生态系统也在不断完善中。
功能特性：
- webpack：webpack是一个功能全面的打包工具，支持各种loader和插件，可以处理多种类型的文件和资源。webpack的插件系统非常灵活，可以扩展出各种复杂的功能。
- vite：vite的设计初衷是专注于开发环境下的快速构建，因此它的一些高级特性相对较少。但是，vite在开发体验、构建速度等方面具有显著优势。
TypeScript支持：
- webpack：webpack需要安装额外的loader才能支持TypeScript的导入。
- vite：vite内置了对TypeScript的支持，可以直接导入TS文件。