前端打包工具对比

Rollup

优点

• Rollup最主要的优点是对 js 代码做了不错的优化. 另外一个优点是打包后的 bundle 输出格式特别多. 支持同时生成umd、commonjs，es的代码

• 原生支持tree shaking

缺点

• 模块过于静态化，HMR很难实现

• Rollup 是专门聚焦于 js 打包的, 那项目里其他资源,比如 CSS 这种它是没法打包的. 所以它只适合用在专门的js 工具库打包, 或者被嵌入别的打包工具. 不适合直接用它来打包web 项目

• 它有个不算缺点的缺点, 就是它的模块化打包是只支持 ES module 的，无法可靠的处理commonjs以及umd依赖 不过如果你的代码里还有 Commonjs 这样的模块. 那你可以安一个 Rollup 的 Commonjs 插件,这样也能做到兼容.

Parcel(微软)

优点

零配置 Parcel 也算是集大成的打包工具. 可以做到零配置

Parcel会直接

• 安装依赖的包

• 安装本地开发 web 服务器

• 进行热更新.你的每次更改它都会 watch 到然后自动刷新浏览器

• 自动把 index.html里引入的 js 替换成带内容指纹的文件引用

• 支持的文件类型丰富 而且它和其他打包工具不同的是, 默认就支持 CSS,图片等资源的打包

• 编译速度块

Webpack

Webpack 一开始诞生的时代

• 还没有出台前台模块化标准.
• 后面就算出台了浏览器兼容性也很不容乐观.
• 那个时候很多包都是 Nodejs 的

Webpack 的打包就是根据一个 entry 入口, 生成多个 chunk, 最后生成 bundle.

优点

• 非常丰富的社区

• 支持多种模块化标准 相比于其他Vite,Rollup 等模块化打包工具,Webpack 有一个很大的优点, 他是支持模块标准最多的打包工具,他支持 Commonjs, ES6 module, Amd 等

缺点

Webpack 打包文件默认支持 js, json. 如果你要在项目里引入 Less 这种预编译 CSS, 就会直接报错.

大型项目编译速度有点慢

Turbopack

Turbopack 的开发团队就是 Webpack 开发团队的.

优点 编译速度快

vite(vue团队)

Vite 的字面意思就是快速的.

它为什么能这么快呢.一大原因是因为它充分利用了 ES module. 所以,它号称自己是不需要打包的.

1、Vite 从自身组成来说, 主要由两部分组成

• 一个开发服务器,因为它基于 ESM,所以更方便的做一些优化处理.比如提供基于模块级别的热更新
• 代码预编译,基于 Rollup.

2、Vite 从开发环境来说又可以分成两部分

• 开发环境 基于 esbuild 进行打包编译. 因为 esbuild 是用 Go 语言编写的, 这样可以最大化的利用系统资源,速度会比用 js 编译速度快 10-100 倍.
• 生产环境 进行 Rollup 的资源输入输出.为什么生产环境就不用 esbuild 了呢.那是因为 esbuild 不支持code spliting等特性.

优点

• 编译速度快. 本地化和生产环境都用了性能非常高且最合适的工具.

而且它充分利用了 ES module 的特性.本地化开发如果你不是写的 Vue 文件甚至它是不需要再有资源的打包这个部分的,直接让浏览器去加载模块就好了.

• 支持的框架多

• 默认支持 TS 和 CSS

Vite本身就是 TS 编写的.

缺点

• 在开发环境会有多次重复的请求

• 会阻塞首屏的加载

Rspack(字节)

基于 Rust 语言开发的 Web 高性能构建工具

Rust 是种高效、可靠的通用高级语言。其高效不仅限于开发效率，执行效率也是令人称赞的，属于少有兼顾开发效率和执行效率的语言。

Rspack 目前支持 React、Vue、Svelte、Solid、NestJS, Angular 初步支持。

优点

• 启动速度：基于 Rust 实现，构建速度极快。

• HMR(热更新)：内置增量编译机制，HMR 速度极快，完全胜任大型项目的开发。

• 兼容 webpack 生态：针对 webpack 的架构和生态进行兼容，无需从头搭建生态。

• 内置常见构建能力：对 TypeScript、JSX、CSS、CSS Modules、Sass 等提供开箱即用的支持。

• 默认生产优化：默认内置多种优化策略，如 Tree Shaking、代码压缩 等等。

缺点

• Loader 支持有限， Plugin 目前主要靠内置，高级点的使用都比较麻烦或者支持有限，内置后配置都比较简单。

• 更适合庞大的项目，这样运行速度、Build 速度都能保持在 webpack 的 5-10 倍，对中小项目提升有限。

• 只支持 nodejs 14 以上的项目迁移。