在网络开发领域，JavaScript 是动态、交互式和单页面网络应用程序背后的动力源泉。然而，随着现代网络应用程序复杂性的增加，JavaScript 库、框架和依赖关系的数量也在增加。这会导致代码库臃肿、效率低下，影响性能和用户体验。
为了应对这一挑战，JavaScript 打包程序应运而生！这些优化向导专门负责完善代码和提高性能。向 JavaScript 打包程序领域的三位重量级人物问好： Rollup、Webpack 和 Parcel – 开发者世界的明星。
本文将全面介绍这些 JS 打包程序，深入探讨它们的优势、独特性和突出功能，同时阐明它们的优点和局限性。
什么是 JavaScript 打包程序？
在构建网络应用程序时，事情可能会变得相当复杂。为了保持一切井井有条和可维护性，应用程序被分成多个文件。
但问题是：加载多个独立文件会降低应用程序的运行速度。这不仅是因为浏览器需要多次请求才能为网页获取这些文件，还因为浏览器可能会从这些文件中加载和处理不必要的代码。
打包程序通过分析应用程序的依赖关系，生成包含所有必要代码的单一文件，从而帮助解决这一问题。简单地说，JavaScript 打包程序是一种将多个 JavaScript 文件及其依赖关系合并为一个文件（通常称为打包文件）的工具。
有了 JavaScript 打包程序，我们就能实现将下列代码：
<head> <script type="text/javascript" src="/navbar.js"></script> <script type="text/javascript" src="/sidebar.js"></script> <script type="text/javascript" src="/some-modal.js"></script> <script type="text/javascript" src="/footer.js"></script> </head>
转为:
<head> <script type="text/javascript" src="/compressed-bundle.js"></script> </head>
JavaScript 打包程序不仅限于 JavaScript 代码。它们还可以打包其他资产，如 CSS 文件和图片。它们还可以进行优化，如最小化、树状结构和代码拆分。
说到这里，您可能想知道是否应该在所有项目中使用 JavaScript 打包程序。要回答这个问题，我们先来了解一下打包程序的重要性。
JavaScript 模块打包程序在现代网络开发中的重要性
在当今瞬息万变的网络开发世界中，JavaScript 模块打包程序已成为至关重要的盟友。它们能处理管理依赖关系和组合 JavaScript 文件的棘手任务–有点像解谜。
过去，开发人员习惯于直接在 HTML 中嵌入 <script /> 标记，或在 HTML 页面中链接多个文件。但随着网络的发展，情况变得越来越复杂。由于服务器请求过多，旧技术导致网页加载缓慢，而且代码重复，开发人员需要在不同的网络浏览器上运行。
这就是 JavaScript 模块打包程序发挥作用的地方。它们彻底改变了我们使用 JavaScript 的方式。虽然网络浏览器现在支持 ES 模块，HTTP/2 等技术也解决了请求开销的问题，但 JavaScript 打包程序仍然必不可少。
JavaScript 打包工具不仅仅是时髦的实用工具，它们还是网络开发效率的缔造者。这些工具不仅能最大限度地减少请求开销，还能增强代码结构、提高性能并简化开发工作流程。
从本质上讲，它们就像导体一样，和谐地组织代码，加快开发速度，并确保在各种情况下都能顺利运行。
随着网络技术的不断发展，打包程序也在不断调整，并在创造非凡网络体验的过程中发挥着不可或缺的作用。但请记住，这并不是因为新工具的出现而使用它们。打包工具在现代网络开发中发挥着坚实的作用，是良好编码实践的基础。
在开始探索技术层面之前，让我们先回顾一下 JavaScript 打包程序的历史。
JavaScript 打包程序的历史
在网络开发的早期，管理 HTML 文件中的脚本标记是一个既费力又容易出错的过程。因此，第一批 JavaScript 打包程序应运而生，它可以自动加载和执行 JavaScript 文件。
第一代打包程序（如 RequireJS）大约在 2010 年推出。这些打包程序引入了异步模块加载的概念，允许开发人员按照需要的顺序加载 JavaScript 文件，而不必一次性加载所有文件。这减少了初始页面加载时的 HTTP 请求次数，从而提高了性能。
Browserify 和 Webpack 等第二代打包程序大约在 2011-2012 年间推出。这些打包程序比第一代打包程序更强大，不仅可以用来打包 JavaScript 文件，还可以打包 CSS 和图片等其他资产。这使得创建更高效、性能更强的网络应用程序成为可能。
随着时间的推移，随着 JavaScript 功能的发展和模块化编程的普及，第三代打包程序应运而生。Rollup（2014 年）侧重于优化库和包的打包，而 Parcel（2017 年）则强调零配置设置和闪电般快速的开发工作流程。
近年来，React、Vue.js、Svelte.js 和 Angular 等基于组件的 UI 库和框架的兴起也影响了打包程序的发展。Create React App 和 Create Vue 等工具抽象了复杂的配置，使项目更容易设置最佳打包策略。
如今，JavaScript 打包程序已成为网络开发工具包的重要组成部分。开发人员使用它们来优化网络应用程序的性能、可维护性和可移植性。随着 JavaScript 的不断发展，打包程序将继续在帮助开发人员创建高效、高性能的网络应用程序方面发挥重要作用。
JavaScript 打包程序如何工作？
JavaScript 打包
目前有多种 JavaScript 打包程序可供选择，虽然它们提供的功能各不相同，但一般都遵循类似的工作流程。为了更好地了解这些打包程序的内部工作原理，我们将把整个过程分成几个较小的连续步骤：
1. 收集输入
要启动 JavaScript 打包程序，打包程序的首要任务是确定应打包的文件。作为开发人员，您可以通过指出项目中的一个或多个主文件来明确这一点。这些主文件通常包含基本的 JavaScript 代码，这些代码依赖于称为模块或依赖项的较小部分。
// main.js
Import { scream } from './Module1'; // returns string ‘scream’
import { shout } from './Module2'; // returns string ‘shout’
import { letItAllOut } from './Module3'; // returns string ‘let it all out’
// Log 'Black Eyed Peas - Scream & Shout' lyrics
console.log(`I wanna ${scream} and ${shout} and ${letItAllOut}`);
console.log("We sayin' oh we oh, we oh, we oh");
在这段代码中，我们的主模块（main.js）导入了其他三个模块，称为依赖关系。值得注意的是，每个模块都可能有自己的依赖关系。解决这些嵌套的依赖关系就进入了下一步。
2. 依赖关系解析
依赖关系解决步骤紧随最初的输入收集步骤之后，也是真正神奇的地方。输入收集的重点是识别项目中的主要入口点，而依赖解析则是彻底扫描这些入口文件中的代码，以发现导入或所需的 JavaScript 模块。这项侦查工作包括跟踪 import() 和 require() 路径。
把它想象成组装拼图–每一块拼在一起，在这一步中，JavaScript 打包程序会收集信息，以了解所有这些拼图是如何相互连接的。
依赖关系解析 – 理解模块和依赖关系之间的关系
现代 JavaScript 打包程序在依赖关系解析过程中利用了静态分析和树状结构等先进技术。静态分析可在不执行代码的情况下解析代码，加快依赖性检测并缩短打包时间。树状结构消除了未使用的代码，确保最终的打包程序保持精简。
此外，打包器还会创建一个可视化图形，表示依赖关系树。这不仅能展示模块关系，还能进行优化。打包程序可以对模块进行重新排序，以加快加载速度，并协助解决循环依赖问题，确保代码无缺陷、高性能。
3. 代码转换
打包程序在将 JavaScript 代码组装成打包包之前，可能会对其进行若干转换。这些转换包括：
- Minification: 删除代码中不必要的字符和空格，使打包包更加紧凑和精简。
- Transpilation: 将现代 JavaScript 代码转换为旧版本，以确保在各种浏览器和环境中的兼容性。
- Optimization: 应用各种技术提高代码的效率。这可能包括重新安排和重组代码以减少冗余，甚至应用复杂的算法来提高性能。
4. 资产打包
虽然 JavaScript 打包程序以打包 JavaScript 代码而闻名，但它们也可以通过称为资产打包的过程打包其他资产（图片和 CSS 文件）。
但需要注意的是，并非所有打包程序都内置了这一功能。对于某些打包程序，实现资产打包可能需要额外的设置，包括插件、加载器和配置调整。
以下是支持资产打包时的工作原理：
- Asset importing（资产导入）: 在代码中，你可以使用导入语句来包含图片或 CSS 等资产。
- Asset loading rules（资产加载规则）: 当打包程序遇到这些导入语句时，它会识别出该资产需要包含在打包程序中。然后，它会针对不同的资产类型应用特定的加载规则。
- Asset processing（资产处理）: 对于图片和 CSS 文件等资产，打包程序会使用加载器或插件。这些工具会对资产进行处理，其中可能包括为网络优化图片或转换 CSS 文件以提高兼容性。处理完成后，它们会生成唯一的 URL 或路径，以访问打包包中处理过的资产。
- URL generation（生成 URL）: 打包程序将用生成的 URL 或路径替换导入语句。例如：
const logo = '/assets/kinsta-logo.png'。 - Bundle generation（生成打包包）: 打包程序创建最终打包包时，会将这些处理过的资产作为打包包的一部分。根据配置和优化设置的不同，它们通常以 base64-encoded 数据或单独文件的形式添加到打包包中。
- Asset serving（资产服务）: 当你的网络应用程序在浏览器中加载时，它会使用生成的 URL 或路径请求打包的资产，包括图片。然后，这些资产将直接从打包包中提供，或在必要时从服务器获取。
这一过程可确保图片和 CSS 等资产有效地包含在打包包中，并与 JavaScript 代码一起提供。
5. 打包
整理好所有依赖关系并对代码进行必要的调整后，打包程序就开始了主要工作-打包。它将所有相关的 JavaScript 文件合并到一个大文件中。这样就能确保这些文件相互依赖的顺序得以保持，从而确保所有功能都能正常运行。
打包模块和依赖关系
6. 生成输出
最后一个打包过程是创建打包后的 JavaScript 文件，它是整个过程的最终结果。该文件包含来自入口点的所有代码及其相互关联的依赖项，将它们合并为一个具有凝聚力的实体。通常，这个打包文件会有一个唯一的名称，并存储在指定的位置。
现代的打包程序通常会有额外的技巧，以增强 JavaScript 在网页上的加载方式。其中一项功能就是代码分割，即巧妙地将打包包分割成小块，只有在需要时才提取。这种策略性方法缩短了初始加载时间，带来了更流畅、更高效的用户体验。
总之，JavaScript 打包程序的工作原理是汇总所有必要的 JavaScript 文件，解决它们之间的依赖关系，对代码进行增强，然后将它们混合成一个单一的优化打包程序。然后将该打包包集成到网页中，从而加快加载速度，改善用户体验。
Rollup、Webpack 和 Parcel 概述：优缺点
Rollup、Webpack 和 Parcel 在 Google Trends 上的对比。
Rollup、Webpack 和 Parcel 等工具在不断扩大的现代网络开发领域中占据着中心位置，在这一领域中，对高效资产管理和优化打包的要求至关重要。
Rollup
Rollup 是 JavaScript 的模块打包程序，它能将小型代码组件编译成一个较大的项目，如库或应用程序。它由 Rich Harris 于 2015 年创建，旨在解决 JavaScript 应用程序开发日益复杂的问题。
当时，开发人员正苦于如何有效打包 JavaScript 应用程序和库的不同部分，这对于优化性能和确保不同浏览器之间的兼容性至关重要。传统的打包工具依赖于 CommonJS 和 AMD 等方法，随着网络应用程序变得越来越复杂，这些方法往往会导致速度变慢和混乱。
将项目拆分成较小的部分通常可以简化流程，减少意外问题，并使问题的解决变得更容易。但是，传统的 JavaScript 无法做到这一点。
后来，ES6 的出现改变了 JavaScript 的游戏规则。它引入了导入和导出函数和数据的语法，以方便在独立的 JavaScript 文件之间共享。虽然该功能已经建立，但在 Node.js 中仍未实现，而且仅在现代浏览器中可用。
Rollup 决定改变现状。它采用了新的 ES 模块格式，使代码的组合更加简洁流畅。这让开发人员有能力混合和匹配来自不同库的代码。
此外，开发人员还可以使用新模块系统编写代码，同时将其无缝编译成现有的支持格式，如 CommonJS 模块、AMD 模块和 IIFE 式脚本。从本质上讲，在获得树状结构和浏览器兼容性优势的同时，您还获得了编写可扩展代码的能力。
随着时间的推移，Rollup 在不断发展和适应。无论您是在开发小型库还是大型应用程序，Rollup 都能帮助您实现目标。
使用 Rollup 的优势
虽然 Rollup 有一些很好的优点，但在选择打包工具时，还应该评估项目的独特要求、团队对工具的使用经验以及可能影响开发工作流程的其他方面。
以下是 Rollup 的一些主要优点：
- Tree Shaking: Rollup 的优势在于它能高效地进行树形调整。这意味着它可以分析你的代码，并从最终打包包中消除任何未使用或死代码，从而缩小文件大小并提高性能。
- 可配置的死代码消除: Rollup 允许你配置它执行死代码消除（DCE）的积极程度，让你更能控制打包包大小和潜在功能之间的权衡。
- 更小的软件包大小: 由于 Rollup 具备树状结构功能，且专注于 ES 模块，因此生成的打包包大小通常比其他打包程序小。这可以加快加载时间，改善用户体验，尤其是在低带宽或移动网络上。
- ES 模块 (ESM) 支持: Rollup 在设计时考虑了对本地 ES 模块的支持。它能原生理解 ES 模块，从而更准确、更高效地打包现代 JavaScript 代码。这使它成为构建广泛使用 ES 模块的应用程序的最佳选择。
- 代码拆分: Rollup 支持代码分割，允许你将代码分割成可按需加载的小块。这对于需要优化初始加载时间的大型应用程序尤其有用。
- 性能: Rollup 的设计强调性能。它以更快的构建时间和更高效的运行时性能而著称，因此适合速度优先的项目。
- 插件系统: Rollup 拥有灵活的插件系统，可以根据需要扩展功能。你可以添加各种插件来优化资产、预处理代码或在打包过程中执行其他任务。
- 可配置的输出格式: Rollup 支持多种输出格式，如 CommonJS、AMD 和 UMD 以及 ES 模块。这种多功能性满足了项目对各种模块系统或环境兼容性的要求，使其成为构建库和包的热门选择。
- 保留模块结构: Rollup 可以保留代码的原始 ES 模块结构，使调试和理解打包代码变得更容易。
- 范围提升: Rollup 可执行作用域提升，通过将相关代码分组，优化并减少函数闭包的开销。这样可以缩小打包代码的规模，提高运行时性能。
- 清晰的错误信息: Rollup 以其简洁明了的错误信息而著称，这大大简化了调试过程，更容易识别代码或配置中的问题。
- 活跃的社区: 虽然规模不如其他一些打包程序大，但 Rollup 拥有一个活跃且不断发展的社区。这意味着你可以从使用该工具的其他开发人员那里找到教程、插件和支持。
- 更小的开销: 与其他一些打包程序相比，Rollup 生成的打包程序运行时开销较小，因此适合创建更小、更高效的应用程序。
使用 Rollup 的缺点
- 传统浏览器的配置: 如果需要支持缺乏 ES 模块支持的旧版浏览器，Rollup 可能需要额外的配置或使用额外的工具来确保兼容性。
- 有限的 HMR（热模块替换）支持: Rollup 对热模块替换的本地支持不如 Webpack 那么全面。虽然有插件可以添加 HMR 功能，但可能需要额外的设置和配置。
- 社区规模较小: 虽然 Rollup 拥有一个活跃的社区，但其规模不如 Webpack 等更受欢迎的打包程序社区大。这可能意味着可用资源、教程和社区驱动的解决方案较少。
- 有限的动态导入处理: 虽然 Rollup 支持动态导入，但它在处理涉及动态导入的复杂场景时，可能不如其他一些打包程序无缝，尤其是在处理大型项目时。
Webpack
Webpack 是网络开发世界中的一个重要工具。Webpack 诞生于 2012 年，当时网络开发正在不断发展，新的挑战层出不穷，尤其是在高效管理现代网络应用的资产方面。
在当时，创建单页面应用程序并有效处理 JavaScript 文件、样式表和图像等网络资产是一项挑战。现有的工具缺乏处理复杂工作流程所需的灵活性和可扩展性，这导致了 Webpack 的诞生。
Webpack 引入了一种使用模块组织代码的新方法。将这些模块想象成网站的乐高积木。与其他工具不同，Webpack 可以轻松地将这些积木无缝组装起来。
它将代码转化为浏览器可以快速理解的语言，从而加快了网站的加载速度，带来更流畅的用户体验。但它并没有止步于此。Webpack 的真正优势在于其适应性。它允许开发人员根据自己的具体需求定制项目，从简单的任务到复杂的工作。可以把它想象成项目的 “自建冒险”。从简单的任务到复杂的任务，你都可以按照自己的喜好进行设置。
对于追求定制化和灵活性的网络开发人员来说，Webpack 是值得信赖的选择。
使用 Webpack 的优势
以下是 Webpack 在现代网络开发中的一些主要优势。
- 模块化开发: Webpack 基于模块的方法鼓励模块化开发，允许开发人员将代码分解成更小、更易于管理的片段。这促进了代码的可重用性、可维护性以及团队成员之间的协作。
- 打包优化: Webpack 擅长使用代码拆分、树状结构和消除死代码等技术优化打包包。这使得打包包的大小更小、加载时间更快、网络应用程序的整体性能更好。
- 可扩展性: 通过使用加载器和插件，Webpack 的架构具有很强的可扩展性。开发人员可以根据自己的具体需求定制构建流程，无缝集成各种工具和预处理器。
- 开发体验: Webpack 的热模块替换（HMR）功能可在开发过程中提供即时反馈。开发人员无需刷新整个页面就能实时看到变化，这大大加快了调试和迭代过程。
- 丰富的生态系统: Webpack 拥有一个充满活力的生态系统，其中包含大量社区贡献的加载器、插件和预设。这个庞大的生态系统能满足各种开发需求，从优化图像到与不同的前端框架集成。
- 代码拆分: Webpack 内置的代码拆分功能可以创建更小的代码块，并按需加载。这就加快了初始页面加载速度，改善了用户体验，尤其是对于代码库庞大的应用程序而言。
- 动态导入: Webpack 支持动态导入，这对于按需加载应用程序的懒加载部分特别有用。
- 缓存和长期缓存: Webpack 支持高级缓存机制，允许浏览器高效地缓存资产。长期缓存可确保资产在多个部署中保持缓存状态，从而减少返回用户的加载时间。
- 高级配置: Webpack 的配置系统可对打包过程进行高度控制，这对大型复杂项目至关重要。
使用 Webpack 的缺点
- 复杂的配置: 配置 Webpack 可能会让人望而生畏，对于初学者来说尤其如此。大量的选项、加载器和插件可能会导致陡峭的学习曲线，需要仔细管理。
- 性能开销: 虽然 Webpack 的优化通常能提高性能，但在开发阶段，尤其是在大型项目中，该工具本身可能会带来性能开销。
- 开发构建缓慢: Webpack 可能会花费很长时间来构建应用程序，尤其是在频繁更改的开发阶段。这可能会让那些希望自己的更改能快速反映在浏览器中的开发人员感到沮丧。
Parcel
Parcel 于 2017 年发布，是一个开源项目，旨在简化与传统打包程序相关的复杂性。它倡导零配置方法，将开发人员从复杂的初始项目设置中解放出来。
传统的打包工具通常需要大量配置，导致开发人员的设置过程非常繁琐。但有了 Parcel，开发人员就可以直接进入项目，而不必被设置任务所淹没。从资产管理到模块打包，它能自动完成大部分任务，使开发工作更加顺畅。
Parcel 的突出特点是原生支持各种资产类型，包括 HTML、CSS、JavaScript 以及图像和字体等专用资产。它能将这些资产无缝集成到项目中，无需进行大量设置，从而简化了开发流程。
尽管 Parcel 是一款新产品，但它还是吸引了寻求轻松打包体验的开发人员。它既简单又不影响性能，为构建工具世界带来了一股新鲜空气。
使用 Parcel 的优势
- 零配置设置: Parcel 最大的特点可能就是零配置设置。Webpack 和 Rollup 通常需要复杂的配置文件才能启动，而 Parcel 则不同，它会自动检测和配置大多数项目设置。这使它对初学者来说非常容易上手，让开发人员无需花时间配置就能快速上手并运行。
- 最适合初学者的打包工具: Parcel 的 “零配置” 方法对刚进入生态系统的开发人员尤为有利，可减少与复杂配置相关的学习曲线。
- 内置资产处理: Parcel 内置支持各种资产类型，包括图片、CSS、HTML 等。您无需为常见的资产类型设置加载器或插件，从而简化了开发流程，减少了对额外配置的需求。
- 自动解决依赖性问题: Parcel 可自动分析项目的依赖关系，并根据需要将其打包。这一功能消除了在配置文件中手动指定入口点和依赖关系的需要，使开发和代码维护更加简单明了。
- 快速构建时间: Parcel 利用多核处理技术在所有内核之间并行处理工作，充分利用了现代硬件的优势，从而加快了构建时间，提高了开发人员在开发周期中的工作效率。
- 代码分割变得简单: Parcel 通过其神奇的导入策略自动进行代码拆分，无需明确干预即可提高性能。
- 热模块替换: Parcel 的开发服务器集成了开箱即用的热模块替换功能，无需手动重新加载即可实现实时更新。
- 多语言支持: Parcel 开箱即支持多种语言，包括 JavaScript、TypeScript 等。
- 注重开发人员体验: Parcel 优先考虑流畅和开发人员友好的体验。它的零配置方法和开箱即用的功能迎合了开发人员的需求，他们希望专注于编写代码，而不是管理构建工具配置。
使用 Parcel 的缺点
- 配置灵活性有限: 虽然 Parcel 的零配置方法对很多人来说都很有利，但对于有特殊要求的项目来说，它可能会限制定制的可能性。
- 插件生态系统: Parcel 的插件生态系统虽然在不断发展壮大，但其广度和多样性可能不及更成熟的打包程序。
- 支持: Parcel 是一个较新的打包程序，因此它可能无法获得与 Webpack 等更成熟的打包程序相同水平的支持。
Rollup、Webpack 和 Parcel 的比较
是时候在聚光灯下分析这三种打包程序的性能了。我们将对每个打包程序进行测试，观察它们在构建时间、打包程序大小和整体优化方面的表现。
配置和易用性
构建 Vue 3 组件库是促进不同项目间代码重用和可维护性的实用方法。在本节中，我们将引导您完成创建 Vue 3 组件库的过程，然后将其与三个著名的打包程序整合： Rollup、Webpack 和 Parcel。
Vue 3 组件库设置
首先，我们将为项目创建一个新目录并导航到该目录。
mkdir kinsta-component-library cd kinsta-component-library
使用 Vue CLI 初始化新的 Vue.js 项目。如果尚未安装 Vue CLI，可使用以下命令进行安装：
npm install -g @vue/cli
然后，我们可以创建一个新的 Vue 项目：
vue create .
按照提示选择默认预设或根据需要手动选择功能。项目创建完成后，导航至项目目录并探索其结构。如果你是 Vue 的新手，这里有 10 个基本的 Vue.js 概念供你入门。
接下来，导航到 src/components 目录，你会发现已经创建了一个 HelloWorld.vue 文件。复制这个组件三次，更改每个文件的名称，然后将它们移到名为 Greeting 的文件夹中，这样我们的组件库就可以有多个组件了。文件夹结构如下
- src - components - Greetings - HelloWorld.vue - HelloWorldTwo.vue - HelloWorldThree.vue - HelloWorldFour.vue
最后，在 Greeting 文件夹中创建一个 greetings.js 文件，并导出所有组件：
export { default as HelloWorld } from "./HelloWorld.vue";
export { default as HelloWorldTwo } from "./HelloWorldTwo.vue";
export { default as HelloWorldThree } from "./HelloWorldThree.vue";
export { default as HelloWorldFour } from "./HelloWorldFour.vue";
现在，您的 Vue.js 项目已经就绪，让我们深入了解打包程序的世界，观察 Rollup、Webpack 和 Parcel 在实际应用中的表现。
Rollup：打包 Vue 3 组件库
首先将 Rollup 安装为开发依赖项：
npm install rollup rollup-plugin-vue rollup-plugin-css-only @rollup/plugin-image --save-dev
接下来，在项目根目录下创建一个 rollup.config.js 文件，以便根据需要配置 Rollup：
import vue from "rollup-plugin-vue";
import css from "rollup-plugin-css-only";
import image from "@rollup/plugin-image";
export default {
input: "src/components/Greeting/greetings.js",
output: {
file: "dist/bundle.js",
format: "esm",
},
plugins: [css(), vue({ css: false }), image()],
external: ["vue"],
};
在上述示例中，使用了三种不同的插件，以确保 Rollup 能够理解并打包不同类型的资产：
- rollup-plugin-vue: 该插件用于以 SFC 格式（单文件组件）将 Rollup 与 Vue.js 集成。
- rollup-plugin-css-only: 该插件可监控 CSS 导入并将其作为一个资产发布。
- @rollup/plugin-image: 一个 Rollup 插件，用于导入 JPG、PNG、GIF、SVG 和 WebP 文件。
设置完成后，执行 Rollup 生成过程：
npx rollup -c
Webpack: 打包 Vue 3 组件库
要将您的库与 Webpack 集成，首先要安装所需的依赖项：
npm install css-loader vue-style-loader webpack webpack-cli --save-dev
在项目根目录下创建 webpack.config.js 文件并配置 Webpack。下面是一个例子：
const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
module.exports = {
mode: "development",
entry: "./src/components/Greeting/greetings.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "my-library.js",
library: "MyLibrary",
libraryTarget: "umd",
umdNamedDefine: true,
},
module: {
rules: [
{
test: /.vue$/,
loader: "vue-loader",
},
{
test: /.css$/,
use: ["vue-style-loader", "css-loader"],
},
],
},
plugins: [new VueLoaderPlugin()],
resolve: {
alias: {
vue$: "vue/dist/vue.esm-bundler.js",
},
},
};
在上面的代码中，使用了三种不同的插件和加载器：
- VueLoaderPlugin: 用于 Vue 单文件组件的 Webpack 加载器。
- vue-style-loader: 该加载器会将 CSS 动态注入文档的样式标记中。
- css-loader: 加载器会像
import/require()一样解释@import和url()，并对其进行解析。
我们还必须使用 path.resolve() 将路径解析为绝对路径。
执行 Webpack 打包过程：
npx webpack --config webpack.config.js
Parcel: 打包 Vue 3 组件库
最后，让我们来探索以零配置方法著称的 Parcel。首先将 Parcel 安装为开发依赖项：
npm install --save-dev parcel
在 package.json 文件中，更新必要的行以显示源文件和模块文件：
"source": "src/components/Greeting/greetings.js", "module": "dist/main.js"
调整构建脚本以使用 Parcel：
"build": "parcel build"
现在，Parcel 会自动检测项目所需的所有插件和加载器，并为您安装，然后继续打包过程。运行构建脚本，体验 Parcel 简单易用的打包过程：
npm run build
总结：配置和易用性比较
现在，我们已经将每个打包程序与 Vue 集成在一起，构建了一个组件库，让我们来提取一些观察结果：
- Rollup: Rollup 提供了一个简洁明了的配置过程。不过，需要注意的是，某些方面（如处理 CSS 和图片）可能需要额外的手动配置。Rollup 专注于优化和性能，这对中小型 Vue 3 组件库很有帮助。
- Webpack: Webpack 提供了广泛的可配置性，可对打包过程的各个方面进行强大的控制。虽然其配置可能比较复杂，但它为大型和复杂的 Vue 3 组件库提供了强大的解决方案。学习曲线可能比较陡峭，但在定制和优化至关重要的项目中，这种投资是有回报的。
- Parcel: Parcel 的零配置方法大大减少了配置开销，使打包 Vue 3 组件更容易上手。它能自动检测和设置大部分设置，简化了快速开发的过程。此外，它还允许开发人员修改和自定义工具设置的默认配置。
值得注意的是，Rollup 还为配置文件中的 import() 和 export() 提供了节点多填充功能，而 Webpack 却缺乏这些功能。此外，Rollup 接受相对路径，而 Webpack 则不接受，因此需要使用 path.resolve() 等其他方法。
基准：构建时间和软件包大小
在这次基准比较中，我们评估了三种打包程序的性能。这些测试是在配备了 Apple M1 芯片和 8 核 GPU、8GB 内存的 MacBook Air 上进行的，重点测试了包含 10 个组件的 Vue 3 组件库。请注意，实际结果会因项目的复杂性和配置而异。
构建时间
| Rollup [Latest] (ms) | Webpack [Latest] (ms) | Parcel [Latest] (ms) | |
| Dev first build | 350 | 700 | 500 |
| Dev reload | 50 | 25 | 40 |
- Rollup: Rollup 领先。它在设计时充分考虑了性能，擅长快速生成优化的打包包。这使得 Rollup 成为中小型项目的理想选择，在这些项目中，快速构建时间至关重要。
- Webpack: 另一方面，Webpack 提供了广泛的功能和强大的插件生态系统，但这种多功能性的代价是稍慢的构建时间。与 Rollup 相比，Webpack 处理复杂项目和不同资产类型的能力可能会导致更长的构建时间。
- Parcel: Parcel 的目标是提供开箱即用的零配置体验，因此通常可以快速完成设置和构建过程。不过，在处理大型项目或需要进行更多定制时，Parcel 的速度可能会落后于 Rollup 和 Webpack。
打包尺寸
| Rollup [Latest] (KB) | Webpack [Latest] (KB) | Parcel [Latest] (KB) | |
| Bundle Size | 90 | 140 | 110 |
- Rollup: Rollup 利用树状结构、ES6 模块、作用域提升、最小化、代码拆分和插件生态系统等优化技术生成小型打包包。
- Webpack: 由于配置复杂，Webpack 产生的打包包比 Rollup 和 Parcel 要大。与 Rollup 和 Parcel 不同，使用 Webpack 实现较小的打包包需要仔细的配置。
- Parcel: Parcel 的打包包比 Webpack 的小，但比 Rollup 的大，这是因为 Parcel 采用了用户友好的零配置方法、默认的 Babel 转换、不太激进的树状抖动，以及比 Webpack 更小的运行时开销。
受欢迎程度
衡量开发者社区对不同构建工具的偏好的一种有见地的方法是查看流行度指标。我们使用 NpmTrends 网站对 Rollup、Webpack 和 Parcel 进行了比较。
Rollup vs Webpack vs Parcel 下载量比较
根据 npm 软件包的下载量，上图描绘了这些工具的受欢迎程度。让我们使用 star-history.com 网站来看看 Github 星级之间的比较：
Rollup vs Webpack vs Parcel Github 星级比较
Rollup 擅长减少打包包的大小并提高性能，因此深受库和小型项目的欢迎。Webpack 是一款广受认可、文档丰富的工具，以处理各种文件类型的多功能性和强大的社区支持而著称。另一方面，Parcel 以其简单性和快速设置脱颖而出，是小型项目和快速原型的理想选择。
请记住，随着时间的推移，这些工具的受欢迎程度会随着开发趋势的变化和新工具解决方案的出现而变化。在决定将哪种构建工具纳入自己的项目时，密切关注社区的动向可以帮助你选择正确的方向。
开发人员体验
Rollup 以简洁为先，强调以最少的配置高效创建打包包，因此非常适合寻求直接设置的开发人员。另一方面，Webpack 拥有庞大的插件和加载器生态系统，可为复杂的项目提供高度定制化，但也可能带来学习曲线，尤其是对新手而言。
相比之下，Parcel 兑现了零配置的承诺，减少了设置时间和复杂性，是快速原型开发和小型项目的有力选择。
社区和生态系统
Webpack 拥有一个庞大而成熟的生态系统。其庞大的社区带来了数不胜数的资源、教程和第三方插件。这个生态系统可以满足不同项目规模和复杂程度的开发人员的需求。
Rollup 的生态系统虽然比 Webpack 的小，但却充满活力并在稳步发展。它尤其吸引以性能优化和最小配置为目标的开发人员。它还拥有大量插件，可帮助开发人员简化工作流程。
Parcel 的社区围绕着对初学者友好的方法展开。它的生态系统为小型项目提供快速解决方案和支持，简化了新开发人员的入职流程。它没有太多由社区创建的插件，但可以让开发人员自定义工具的核心插件。
对比透视与总结
让我们回顾一下关于 Rollup、Webpack 和 Parcel 的知识，帮助您做出明智的选择。
| 对比项 | Rollup | Webpack | Parcel |
| 配置复杂性 | 适中：同时支持配置文件和程序配置 | 高：需要复杂的配置文件 | 低：零配置设置，可选配置 |
| 资产处理 | 需要为资产安装插件 | 资产需要加载器和插件 | 内置支持常见资产类型，只需极少设置 |
| Tree Shaking | tree-shaking能力最强，通常更高效 | 支持，但可能需要仔细配置 | 与 Webpack 相比，已提供支持并进行了简化 |
| ES6 模块侧重点 | 是的，围绕 ES6 模块设计。 | 是，支持 ES6 模块 | 是，支持 ES6 模块和多种语言 |
| 代码分割 | 支持通过配置分割代码 | 对代码分割的广泛控制 | 只需少量设置即可自动分割代码 |
| HMR（热模块更换） | 有限支持 | 支持 | 支持内置开发服务器 |
| 性能优化 | 用于优化的插件系统 | 广泛的优化插件生态系统 | 自动优化 |
| 社区和生态系统 | 社区规模较小，但在不断扩大 | 庞大而活跃的社区 | 发展社区，注重简约 |
| 输出格式 | 灵活的输出格式选项 | 灵活的输出格式选项 | 适用于不同环境的多种输出格式 |
| 库与应用的侧重点 | 常被用于建造库 | 适用于库和应用程序 | 应用和原型设计能力强 |
| 开发服务器 | 需要对 HMR 进行额外设置 | 需要为 HMR 进行额外设置 | 带 HMR 的内置开发服务器 |
| 软件包管理器集成 | 与 npm 和 Yarn 集成 | 与 npm 和其他系统配合良好 | 与常用软件包管理器集成 |
介绍 Vite： 新一代构建工具
虽然 Rollup、Webpack 和 Parcel 一直是打包游戏的传统玩家，但像 Vite 这样的新竞争者正在崛起。
Vite（发音类似于 “veet“）因其对构建流程的创新和对更快开发工作流程的承诺，在网络开发者中迅速获得了关注。
Vite 采用了一种根本不同的打包方法。Vite 并不预先打包所有代码和资产，而是采用按需打包的方式。它利用现代浏览器中的本地 ES 模块直接提供代码，避免了开发过程中耗时的打包步骤。
这使得热模块替换（HMR）几乎立竿见影，大大缩短了开发过程中的冷启动时间。
虽然 Vite 的开发服务器采用了按需方法，但仍能提供优化的生产构建。它通过使用 Rollup 进行生产打包来实现这一目标，并利用了同样经过实战检验的打包功能，这也是 Rollup 广受欢迎的原因。
重要的是，Vite 的影响力并不局限于几个小型框架，它甚至涉及到网络开发领域最受欢迎的公司。例如：
- Nuxt.js: Nuxt 曾经是 webpack 的用户，现在已改用 Vite。
- Astro: Astro 团队现在是 Vite 生态系统的贡献者和积极参与者，他们合作加强这两个动态工具的整合，使开发人员在制作高性能网络应用程序时获得无缝体验。
- Svelte.js: Svelte 可与 Vite 无缝集成，用于项目脚手架。
- Laravel PHP: Vite 并不局限于 JavaScript 框架。Laravel PHP 框架也加入了受益于 Vite 功能的行列。Laravel 与 Vite 的整合带来了和谐，提升了开发人员的体验。
- Inertia.js: Inertia 还在 Vue 中加入了对 Vite 的支持，使其成为更多开发人员的首选工具。
- Sanity.io: Sanity Studio 是一个实时内容管理系统（CMS）。其最新版本（即第 3 版）包括基于 Vite 的本地开发集成工具。
Vite 是否适合您的项目取决于您的具体使用情况。如果开发速度、HMR 性能和简化的开发体验是最优先考虑的因素，那么 Vite 可能非常适合。但是，对于具有复杂构建要求的复杂项目，或者对于向后兼容性至关重要的项目，必须仔细评估 Vite 的独特方法是否符合您的需求。
小结
显然，在 Rollup、Webpack 和 Parcel 之间做出选择取决于项目的需求。这三个选项各有所长。掌握了这些知识，你就能为你的网络冒险做出正确的选择。请记住，正确的打包工具就像一个值得信赖的编码伙伴，帮助您实现编码目标。
评论留言