站长

<h3 id="heading-0">模块打包工具</h3><ul><li>ESM 存在环境兼容问题</li></ul><ul><li>模块文件过多，网络请求频繁</li></ul><ul><li>所有前端资源都需要模块化,不仅js文件</li></ul><p>毋庸置疑前端模块打包工具是必要的主流工具 Webpack Parcel Rollup</p><h3 id="heading-1">WebPack</h3><p><a href="https://blogweb.cn/link?target=https://segmentfault.com/a/1190000040126983" target="_blank" rel="nofollow noopener noreferrer">webpack入口</a></p><h3 id="heading-2">Rollup</h3><p>优点</p><ul><li>输出结果更加扁平</li><li>自动移除未引用代码</li><li>打包结果依然完全可读</li></ul><p>缺点</p><ul><li>加载非 ESM 的第三方模块比较复杂</li><li>模块最终被打包到一个函数中，无法实现 HMR</li><li>浏览器环境中，代码拆分功能依赖 AMD 库</li></ul><blockquote><p>如果我们正在开发应用程序，需要大量引入第三方模块，应用过大还要分包</p><p>如果我们开发一个框架或者类库，很少依赖第三方模块，大多数知名框架/库都在使用Rollup作为模块打包</p><p>总结：Webpack大而全，Rollup小而美，应用程序用webpack，库/框架Rollup</p></blockquote><p><a href="https://blogweb.cn/link?target=https://segmentfault.com/a/1190000040126990" target="_blank" rel="nofollow noopener noreferrer">Rollup入口</a></p><h3 id="heading-3">Parcel</h3><p>Parcel发布于2017年，当时Webpack使用上过于繁琐，完全零配置，构建速度快</p><p>vs.Webpack</p><ul><li>Webpack生态更好，扩展更丰富</li><li>Webpack越来越好用</li></ul><p><a href="https://blogweb.cn/link?target=https://segmentfault.com/a/1190000040127000" target="_blank" rel="nofollow noopener noreferrer">Parcel入口</a></p>

模块打包工具毋庸置疑前端模块打包工具是必要的主流工具WebpackParcelRollupWebPackRollup优点缺点如果我们正在开发应用程序，需要大量引入第三方模块，应用过大还要分包如果我们开发一个框架或者类库，很少依赖第三方模块，大多数知名框架/库都在使用Rollup作为模块打包总结：Webpack大而全，Rollup小而美，应用程序用webpack，库/框架RollupParcelPa