模块打包工具

模块打包工具

• 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入口