模块打包工具

模块打包工具

• ESM 存在环境兼容问题

• 模块文件过多，网络请求频繁

• 所有前端资源都需要模块化,不仅js文件

毋庸置疑前端模块打包工具是必要的
主流工具 Webpack Parcel Rollup

WebPack

webpack入口

Rollup

优点

• 输出结果更加扁平
• 自动移除未引用代码
• 打包结果依然完全可读

缺点

• 加载非 ESM 的第三方模块比较复杂
• 模块最终被打包到一个函数中，无法实现 HMR
• 浏览器环境中，代码拆分功能依赖 AMD 库

如果我们正在开发应用程序，需要大量引入第三方模块，应用过大还要分包

如果我们开发一个框架或者类库，很少依赖第三方模块，大多数知名框架/库都在使用Rollup作为模块打包

总结：Webpack大而全，Rollup小而美，应用程序用webpack，库/框架Rollup

Rollup入口

Parcel

Parcel发布于2017年，当时Webpack使用上过于繁琐，完全零配置，构建速度快

vs.Webpack

• Webpack生态更好，扩展更丰富
• Webpack越来越好用

Parcel入口