生产

Parcel 的生产模式会自动捆绑和优化您的应用程序以用于生产。可以使用 parcel build 命令运行：

parcel build src/index.html

大小优化

Parcel 包含许多旨在减小捆绑包大小的优化，包括自动压缩、树摇、图像优化等。

压缩

Parcel 内置了 JavaScript、CSS、HTML 和 SVG 的压缩器。压缩通过删除空白、将变量重命名为更短的名称以及许多其他优化来减小输出捆绑包的文件大小。

使用 parcel build 命令时，默认启用压缩。如果需要，可以使用 --no-optimize CLI 标志禁用压缩和其他优化。

Parcel 使用 SWC 压缩 JavaScript，lightningcss 压缩 CSS，oxvg 压缩 SVG，以及内置的 HTML 压缩器。如果需要，可以使用 .terserrc、svgo.config.json 或 .htmlnanorc 配置文件配置这些工具。有关更多详细信息，请参见 JavaScript、CSS、HTML 和 SVG 的文档。

树摇

在生产构建中，Parcel 静态分析每个模块的导入和导出，并删除未使用的内容。这称为"树摇"或"死代码消除"。树摇支持静态和动态 import()、CommonJS 和 ES 模块，甚至跨语言的 CSS 模块。

Parcel 还尽可能将模块连接到单个作用域，而不是将每个模块包装在单独的函数中。这称为"作用域提升"。这有助于使压缩更有效，并通过使模块之间的引用静态而不是动态对象查找来改善运行时性能。

请参见作用域提升文档，了解如何使树摇更有效的提示。

开发分支移除

parcel build 自动将 NODE_ENV 环境变量设置为 production。这个环境变量通常在库中用于启用仅在开发中使用的调试功能，这些功能可以在生产构建中被剥离以减小捆绑包大小。Parcel 内联此环境变量并优化比较以移除死分支。

您也可以在自己的代码中利用这一功能。例如，您可以使用 if 语句检查 NODE_ENV 环境变量。

if (process.env.NODE_ENV !== "production") {
  // 仅在开发中运行，并将在生产构建中被剥离。
}

有关环境变量内联的更多详细信息，请参见 Node 模拟文档。

图像优化

Parcel 支持调整大小、转换和优化图像。您可以在 HTML、CSS 或 JavaScript 中引用图像时使用查询参数来指定应将图像转换为哪种格式和大小。您可以从同一源图像请求多个大小或格式，这有助于高效地支持不同类型的设备或浏览器。

<picture>
  <source
    type="image/webp"
    srcset="image.jpg?as=webp&width=400, image.jpg?as=webp&width=800 2x"
  />
  <source
    type="image/jpeg"
    srcset="image.jpg?width=400, image.jpg?width=800 2x"
  />
  <img src="image.jpg?width=400" width="400" />
</picture>

调整大小和转换图像在开发和生产模式下都会发生，因此您可以使用正确的图像尺寸和格式进行测试。有关更多详细信息，请参见图像转换器文档。

Parcel 还在生产模式下默认包含对 JPEG 和 PNG 的无损图像优化，这可以在不影响图像质量的情况下减小图像大小。这不需要任何查询参数或配置即可使用。但是，由于优化是无损的，因此可能的大小减小可能小于使用 quality 查询参数或使用 WebP 或 AVIF 等现代格式。

差异化捆绑

Parcel 自动生成带有现代 JavaScript 语法的 <script type="module">，以及在必要时为旧浏览器生成回退的 <script nomodule>。这通过避免对类、async/await 等功能进行转译，减小了大多数用户的捆绑包大小。有关更多详细信息，请参见目标文档中的差异化捆绑。

压缩

Parcel 支持使用 Gzip 和 Brotli 压缩捆绑包。虽然许多服务器即时压缩数据，但其他服务器要求您提前上传预压缩的有效负载。这还可能允许更好的压缩，这对于在每个网络请求上执行来说太慢了。

由于并非每个人都需要它，因此默认不启用压缩。要启用它，请将 @parcel/compressor-gzip 和/或 @parcel/compressor-brotli 添加到您的 .parcelrc。

yarn add @parcel/compressor-gzip @parcel/compressor-brotli --dev

{
  "compressors": {
    "*.{html,css,js,svg,map}": [
      "...",
      "@parcel/compressor-gzip",
      "@parcel/compressor-brotli"
    ]
  }
}

现在，您将获得一个 .gz 和一个 .br 文件，位于原始未压缩捆绑包旁边。如果您有比上面示例中列出的更多的文本类型文件，则需要相应地扩展 glob。

如果您不需要未压缩的捆绑包，也可以从上面的示例中删除 "..." 以仅输出压缩文件。例如，要仅输出 .gz 文件，您可以使用以下配置：

{
  "compressors": {
    "*.{html,css,js,svg,map}": ["@parcel/compressor-gzip"]
  }
}

缓存优化

Parcel 包含与浏览器和 CDN 缓存相关的几个优化，包括内容哈希、捆绑包清单和共享捆绑包。

内容哈希

Parcel 自动在所有输出文件的名称中包含内容哈希，这可以实现长期浏览器缓存。每当捆绑包的内容发生变化时，文件名中包含的哈希将被更新，触发 CDN 和浏览器缓存的失效。

默认情况下，除了入口和某些需要保持名称稳定的依赖类型外，所有捆绑包都包含内容哈希。例如，服务工作者需要稳定的文件名才能正常工作，HTML 中的 <a> 标签引用用户可读的 URL。

您还可以使用 --no-content-hash CLI 标志禁用内容哈希。请注意，名称仍将包含哈希，但每次构建时不会更改。您可以使用命名器插件完全自定义捆绑包命名。

级联失效

Parcel 在每个入口捆绑包中使用清单，以在许多情况下避免级联失效问题。此清单包括从稳定的捆绑包 ID 到最终内容哈希文件名的映射。当一个捆绑包需要引用另一个捆绑包时，它使用捆绑包 ID 而不是内容哈希名称。这意味着当一个捆绑包更新时，只有该捆绑包和入口需要在浏览器缓存中失效，而中间捆绑包不会更改。这提高了跨部署的缓存命中率。

共享捆绑包

在生产构建中，Parcel 自动优化应用程序中的捆绑包图，以减少重复并提高可缓存性。当应用程序的多个部分依赖于相同的公共模块时，它们会自动去重并移动到单独的捆绑包中。这允许常用依赖项与应用程序代码并行加载并由浏览器单独缓存。

例如，如果应用程序的多个页面依赖于 react 和 lodash，它们可能会移动到单独的捆绑包中，而不是在每个页面中重复。这样，当用户从一个页面导航到另一个页面时，他们只需下载该页面的额外代码，而不是重新下载已缓存的库。

有关如何配置此功能的更多详细信息，请参见代码拆分文档。

分析捆绑包大小

Parcel 包含一些工具来帮助您分析捆绑包大小。

详细报告

默认情况下，Parcel 在生产构建时在终端中输出捆绑包报告。它包括每个输出捆绑包的大小和构建时间。要查看有关组成每个捆绑包的文件的更多详细信息，可以使用 --detailed-report CLI 选项。默认情况下，它显示每个捆绑包中最多 10 个文件，按大小排序。您还可以传递一个数字以增加此数量，例如 --detailed-report 20。

捆绑包分析器

@parcel/reporter-bundle-analyzer 插件可用于生成一个 HTML 文件，其中包含一个树形图，直观地显示每个捆绑包中每个资源的相对大小。您可以使用 --reporter CLI 选项运行它。

parcel build src/index.html --reporter @parcel/reporter-bundle-analyzer

这在项目根目录生成一个 parcel-bundle-reports 文件夹，其中包含每个目标的 HTML 文件：

如果您希望在每次构建时自动运行捆绑包分析器，还可以将其添加到 .parcelrc 文件的 "reporters" 中。

Bundle Buddy

@parcel/reporter-bundle-buddy 插件可用于生成与 Bundle Buddy 兼容的报告。您可以使用 --reporter CLI 选项运行它。

parcel build src/index.html --reporter @parcel/reporter-bundle-buddy

现在将 dist 目录中的文件上传到 Bundle Buddy 网站。