前端打包工具rollup、webpack、vite的区别

最新推荐文章于 2025-06-12 15:35:42 发布

手掌日月摘星辰

最新推荐文章于 2025-06-12 15:35:42 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端面试秘籍文章标签： webpack 前端 vite rollup

本文链接：https://blog.youkuaiyun.com/qq_34543438/article/details/126348527

前端面试秘籍专栏收录该内容

157 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

本文对比分析了前端打包工具rollup、webpack和vite的特性与适用场景。rollup主要适用于打包库，webpack适合打包复杂项目，而vite则在rollup基础上实现了热更新，提升了开发体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

总结

rollup更适合打包库，webpack更适合打包项目，vite基于rollup实现了热更新也适合打包项目。

1、Rollup

优点：

    1. Rollup 是一款 ES Modules 打包器，从作用上来看，Rollup 与 Webpack 非常类似。不过相比于 Webpack，Rollup要小巧的多，打包生成的文件更小。（识别commonJs需要插件）
    2. 热更新：Rollup不支持HMR，在对js以外的模块的支持上不如webpack，但是如果是打包纯js库例如react，前期的vue的话，使用rollup是很合适的，打包的产物比较干净，没有webpack那么多工具函数
    3. Rollup 的插件机制设计得相对更干净简洁，单个模块的 resolve / load / transform 跟打包环节完全解耦，所以 Vite 才能在开发时模拟 Rollup 的插件机制，并且兼容大部分 Rollup 插件
    4. rollup原生支持tree-shaking

缺点：

    1. 加载其他类型的资源文件或者支持导入 CommonJS 模块，又或是编译 ES 新特性，这些额外的需求 Rollup需要使用插件去完成
    2. rollup并不适合开发应用使用，因为需要使用第三方模块，而目前第三方模块大多数使用CommonJs方式导出成员，并且rollup不支持HMR，使开发效率降低