<h2 id="rollup简介" tabindex="-1">Rollup简介 <a class="header-anchor" href="#rollup简介" aria-hidden="true">#</a></h2>
<p>Rollup 是一款 <code>ES Modules </code>打包器。它也可以将项目中散落的细小模块打包为整块代码，从而使得这些划分的模块可以更好地运行在浏览器环境或者 Node.js 环境。</p>
<h2 id="rollup-优势" tabindex="-1">Rollup 优势 <a class="header-anchor" href="#rollup-优势" aria-hidden="true">#</a></h2>
<ul>
<li>输出结果更加扁平，执行效率更高；</li>
<li>(tree-shaking)自动化移除为引用的代码</li>
<li>打包的结果依然完全可读</li>
<li>让打包文件体积很小、更快的包</li>
</ul>
<h2 id="劣势" tabindex="-1">劣势 <a class="header-anchor" href="#劣势" aria-hidden="true">#</a></h2>
<ul>
<li>加载非 ESM 的第三方模块比较复杂；</li>
<li>因为模块最终都被打包到全局中，所以无法实现热重载HMR.</li>
<li>浏览器环境中，代码拆分功能必须使用<code>Require.js</code>这样的<code>AMD </code>库</li>
</ul>
<h2 id="与webpack的对比" tabindex="-1">与Webpack的对比 <a class="header-anchor" href="#与webpack的对比" aria-hidden="true">#</a></h2>
<ul>
<li>我们发现如果我们开发的是一个应用程序，需要大量引用第三方模块，同时还需要<code>HMR</code>提升开发体验，而且应用过大就必须要分包。那这些需求<code>Rollup</code>都无法满足。</li>
<li>如果我们是开发一个JavaScript 框架或者库，那这些优点就特别有必要，而缺点呢几乎也都可以忽略，所以在很多像<code>React</code>或者<code>Vue</code>之类的框架中都是使用的<code>Rollup</code>作为模块打包器，而并非<code>Webpack</code>.</li>
</ul>
<p>Webpack 大而全，Rollup 小而美。原则是：应用开发使用 Webpack，类库或者框架开发使用 Rollup。
<img src="https://cdn.wekic.com/_blog/1644731548432-image.png&amp;lazyLoad" alt="image.png" class="lazy" style="max-width: 100%;" data-src="https://cdn.wekic.com/_blog/1644731548432-image.png"></p>
<h2 id="资料" tabindex="-1">资料 <a class="header-anchor" href="#资料" aria-hidden="true">#</a></h2>
<p><a href="https://www.rollupjs.com/" target="_blank" rel="noopener">Rollup 文档</a></p>


Rollup 是一款 ES Modules 打包器。它也可以将项目中散落的细小模块打包为整块代码，从而使得这些划分的模块可以更好地运行在浏览器环境或者 Node.js 环境。

Rollup简介 #

Rollup 优势 #

劣势 #

与Webpack的对比 #

资料 #

Rollup简介

Rollup 优势

劣势

与Webpack的对比

资料