打包工具

Rollup

• 利用 ES6 模块设计，利用 tree-shaking生成更简洁、更简单的代码
• 一般而言，对于应用使用 Webpack，对于类库使用 Rollup
• 需要代码拆分(Code Splitting)，或者很多静态资源需要处理，再或者构建的项目需要引入很多 CommonJS 模块的依赖时，使用 webpack
• 代码库是基于 ES6 模块，而且希望代码能够被其他人直接使用，使用 Rollup
• 打包出的文件仍具有可读性

优点

• 输出结果更加扁平，执行效率更高
• 自动移除未引用的代码
• 打包结果依然完全可读

缺点

• 加载非ESM的第三方模块比较复杂
• 模块最终都会被打包到一个函数中，无法实现HMR
• 浏览器环境中，代码拆分功能依赖AMD库
• 需要代码拆分，或者很多静态资源需要处理，再或者构建的项目需要引入很多 CommonJS 模块的依赖时，使用 webpack

Gulp

• 基于 nodejs 的 steam 流打包
• 定位是基于任务流的自动化构建工具
• Gulp是通过task对整个开发过程进行构建

优点

• 流式的写法简单直观
• API简单,代码量少
• 易于学习和使用
• 适合多页面应用开发

缺点

• 异常处理比较麻烦
• 工作流程顺序难以精细控制
• 不太适合单页或者自定义模块的开发

Webpack

• 一切皆模块，它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源
• 它定位是模块打包器，而 Gulp/Grunt 属于构建工具。Webpack 可以代替 Gulp/Grunt 的一些功能，但不是一个职能的工具，可以配合使用

1.3.1 优点

• 可以模块化的打包任何资源
• 适配任何模块系统
• 适合SPA单页应用的开发

1.3.2 缺点

• 通过babel编译后的js代码打包后体积过大

Webpack 大而全， Rollup小而美

Parcel

• Parcel 是快速、零配置的 Web 应用程序打包器
• 目前 Parcel 只能用来构建用于运行在浏览器中的网页，这也是他的出发点和专注点

1.5.1 优点

• Parcel 内置了常见场景的构建方案及其依赖，无需再安装各种依赖
• Parcel 能以 HTML 为入口，自动检测和打包依赖资源
• Parcel 默认支持模块热替换，真正的开箱即用

1.5.2 缺点

• 不支持 SourceMap
• 不支持 TreeShaking
• 配置不灵活

对于相同体量的项目进行打包，Parcel会比Webpack快很多，因为在Parcel内部使用的是多进程同时去工作，充分发挥了多核CPU的性能，而Webpack中可以使用happypack插件实现这一点。

Vite

• Vite (法语意为 "快速的"，发音 /vit/) 是下一代前端开发与构建工具
• 💡 极速的服务启动 使用原生 ESM 文件，无需打包
• ⚡️ 轻量快速的热重载 无论应用程序大小如何，都始终极快的模块热重载（HMR）
• 🛠️ 丰富的功能 对 TypeScript、JSX、CSS 等支持开箱即用。
• 📦 优化的构建 可选 “多页应用” 或 “库” 模式的预配置 Rollup 构建
• 🔩 通用的插件 在开发和构建之间共享 Rollup-superset 插件接口。
• 🔑 完全类型化的API 灵活的 API 和完整 TypeS

优点

1.使用 esbuild构建依赖比webpack快得多

2.使用ESM在开发环境 使用源码而不进行打包，省略打包步骤

3.使用HTTP头，源码模块使用 304 Not Modified 进行协商缓存，依赖模块使用 Cache-Control: max-age=31536000,immutable 进行强缓存

缺点

• 生态
• 应用于生产需要考量
• 打包用的Rollup，因为esbuild对css等代码的分割能力不好