aug*_*aug 58 bundler reactjs webpack rollupjs
我最近一直在研究汇总,看看它与Webpack和其他捆绑商的区别.我遇到的一件事是,由于"扁平捆绑",它对图书馆更好.这是基于一条推文和最近的React PR来使用Rollup.
根据我的经验,由于围绕扁平捆绑(例如吊装)的更好优化,Rollup更擅长构建库.1/2
如果您使用代码分割等捆绑应用程序,Webpack 2可能更适合您.2/2
我不完全确定我明白这意味着什么.扁平捆绑是指什么？我知道Rollup的文档提到了树形图,以帮助减少包大小,但Webpack也有办法做到这一点.也许我完全不理解这个概念.
请注意,这不是关于Rollup vs Webpack的比较问题.对于那些对此感兴趣的人,Webpack有一个比较图表.这主要是问平板捆绑是什么？Rollup可能会在内部做些什么来实现这一目标？
Ric*_*ris 106
编辑:Webpack现在支持在某些情况下提升范围 - 请阅读此处的博客文章
我们可能对这些东西都有不同的定义,但我认为扁平捆绑只是意味着"将模块转换为单个捆绑" - 即"扁平化"是多余的.React 16的最大区别在于你默认使用预制的捆绑包,而不是你的应用程序负责捆绑React的源模块(虽然总有一个预构建的可用的反向动态UMD包,用Browserify构建).
相反,两者之间的巨大差异是在模块边界发生的事情.webpack的工作方式是将每个模块包装在一个函数中,并创建一个实现加载器和模块缓存的包.在运行时,依次评估每个模块函数以填充模块高速缓存.这种架构具有许多优点 - 它可以实现代码分割和按需加载以及热模块替换(HMR)等高级功能.
Rollup采用不同的方法 - 它将您的所有代码放在同一级别(根据需要重写标识符以避免变量名称之间的冲突等).这通常被称为" 范围提升 ".因此,没有每个模块的开销,也没有每个bundle的开销.您的捆绑包保证更小,并且还会更快地评估,因为间接更少(更多信息 - 小模块的成本).权衡是这种行为依赖于ES2015模块语义,这意味着webpack的一些高级功能更难实现(例如,Rollup不支持代码分割,至少现在还不支持!).
简而言之,webpack 通常更适合应用程序,而Rollup 通常更适合库.
我把一个小小的要点放在一起,说明了这些差异.您还可以通过修改Rollup REPL来了解Rollup的输出.
| 归档时间： |
|
| 查看次数： |
10031 次 |
| 最近记录： |