webpack与rollup

webpack与rollup

关于webpack和rollup

一、Webpack

始于2012年,由 Tobias Koppers发起,用于解决当时现有工具未解决的的一个难题:

构建复杂的单页应用程序(SPA)。特别是 webpack 的两个特性改变了一切:

1、代码拆分(Code Splitting) :可以将应用程序分解成可管理的代码块,可以按需加载,这意味着你的用户可以快速获取交互性的网站,而不必等到整个应用程序下载和解析完成。

2.静态资源(Static assets) :图像和 CSS 可以导入到你的应用程序中,而且还能够被作为依赖图中的另一个节点。不用关心你的文件是否放在正确的文件夹中,再也不用为文件 URL 增添 hash 而使用 hack 脚本,因为 webpack 会帮我们处理这些事情。

二、Rollup
rollup则是由于不同的原因被创建的:利用 ES2015 巧妙的模块设计,尽可能高效地构建出能够直接被其它 JavaScript 库引用的模块

其他的模块打包工具 – 包含 webpack – 通过都是将每个模块封装在一个函数中,将它们放在一个包中,通过浏览器友好的 require 实现,最后逐一执行这些模块。如果您需要按需加载,webpack 这类的打包工具非常合适。否则有点浪费。

Rollup特性:
1.tree-shaking:
通过对代码的静态分析,分析出冗长代码,打包时把这些代码删除,缩小代码体积。(webpack2.0已支持)。所以打包出来的js体积小,可读性高
2.支持ES6模块打包支持:
基于es6,比Webpack和Browserify使用的CommonJS模块机制更高效。

Rollup缺点:
1.代码拆分,Rollup 还不支持。
2.而对于使用 Rollup 的人来说,最大的痛点可能是 – 它能处理大多数 CommonJS 文件(rollup可以通过插件支持 ),

关于两个打包工具的选择

到目前为止,希望这两个工具共同存在并相互支持的原因已经很明确了 – 它们有着不同的用途。总结一句话就是:

对于应用使用 webpack,对于类库使用 Rollup

这不是一个绝对的规则 – 事实上有许多 网站 和 应用程序使用 Rollup 构建,同样的也有大量的库使用了 webpack 构建。但是,对于应用使用 webpack,对于类库使用 Rollup 是一个很好的经验法则。

如果你需要代码拆分(Code Splitting),或者你有很多静态资源需要处理,再或者你构建的项目需要引入很多CommonJS模块的依赖,那么 webpack 是个很不错的选择。

如果您的代码库是基于 ES2015 模块的,而且希望你写的代码能够被其他人直接使用,你需要的打包工具可能是 Rollup 。

——————————————————————————————

文章参考:https://blog.csdn.net/handsomezhanghui/article/details/109353622

上一篇:rollup加载模块的另外方法,官网文档摘取


下一篇:MEXC Global分享:将 NFT 向 Layer 2 迁移 如何让它们友好地跨 Rollup?