模塊打包工具

模塊打包工具

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