# @contentful/optimization-web 中文文档

规范地址：https://npmcn.com/package/%40contentful/optimization-web/

版本：2\.1\.3
npm 元数据更新时间：2026-11-06T12:31:04.823Z
中文译文更新时间：2026-11-10T17:02:36.202Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40contentful/optimization-web
原文对照：https://npmcn.com/package/%40contentful/optimization-web/?lang=original
项目主页：https://github.com/contentful/optimization#readme
源码仓库：https://github.com/contentful/optimization

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：4.2 MB，102 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：3 个
- 首次发布：2026-02-03T12:40:35.018Z
- 最新版本发布：2026-11-06T12:31:04.424Z
- 近 30 天下载量：5711（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：28（近 12 个月 28 个）

## 中文简介

框架不可知网络客户端 SDK 用于内容优化

## 安装

```sh
npm install @contentful/optimization-web
```

也可以使用：`pnpm add @contentful/optimization-web`、`yarn add @contentful/optimization-web`、`bun add @contentful/optimization-web`

## README

[![Contentful Logo](https://raw.githubusercontent.com/contentful/optimization/optimization-web-v2.1.3/contentful-icon.png "Contentful")](https://www.contentful.com/developers/docs/personalization/)

# 内容个性化分析

### 优化 Web SDK

[指南](https://contentful.github.io/optimization/documents/Documentation.Guides.html) • 妇女 [参考文献](https://contentful.github.io/optimization) • 妇女 [捐款](https://github.com/contentful/optimization/blob/optimization-web-v2.1.3/CONTRIBUTING.md)

此 SDK 执行浏览器在顶端的优化行为 [优化核心 SDK](https://github.com/contentful/optimization/blob/optimization-web-v2.1.3/packages/universal/core-sdk/README.md)。直接用于非反应浏览器 应用程序、框架适配器和需要同意状态的客户端运行时间、匿名身份 持久、自动输入交互跟踪和浏览器边事件发送.

如果您正在整合浏览器应用程序, 请从 [开始](https://npmcn.com/package/%40contentful/optimization-web/#readme-getting-started),则 使用情况 [在网络应用中整合优化 Web SDK](https://contentful.github.io/optimization/documents/Documentation.Guides.integrating-the-web-sdk-in-a-web-app.html) 为分步流出. 此 README 保持软件包取向和常见设置选项的关闭 手动; 生成 [参考文件](https://contentful.github.io/optimization) 仍为 导出 API 签名的真伪来源 .

> \[大
> 
> 从v1升级? 跟着 [v1-v2 迁移指南](https://contentful.github.io/optimization/documents/Documentation.Guides.migrating-optimization-sdk-packages-from-v1-to-v2.html) 在更改软件包版本之前.

目录

-   [开始](https://npmcn.com/package/%40contentful/optimization-web/#readme-getting-started)
    -   [Vanilla JS网页的使用情况](https://npmcn.com/package/%40contentful/optimization-web/#readme-usage-in-vanilla-js-web-pages)
    -   [使用网络组件](https://npmcn.com/package/%40contentful/optimization-web/#readme-usage-with-web-components)
-   [何时使用此软件包](https://npmcn.com/package/%40contentful/optimization-web/#readme-when-to-use-this-package)
-   [通用配置](https://npmcn.com/package/%40contentful/optimization-web/#readme-common-configuration)
-   [核心工作流程](https://npmcn.com/package/%40contentful/optimization-web/#readme-core-workflows)
    -   [同意和概况活动](https://npmcn.com/package/%40contentful/optimization-web/#readme-consent-and-profile-events)
    -   [内容分辨率](https://npmcn.com/package/%40contentful/optimization-web/#readme-content-resolution)
    -   [条目互动跟踪](https://npmcn.com/package/%40contentful/optimization-web/#readme-entry-interaction-tracking)
    -   [国家订阅](https://npmcn.com/package/%40contentful/optimization-web/#readme-state-subscriptions)
-   [运行时间笔记](https://npmcn.com/package/%40contentful/optimization-web/#readme-runtime-notes)
-   [相关](https://npmcn.com/package/%40contentful/optimization-web/#readme-related)

## 开始

使用与国家预防机制兼容的软件包管理器安装,例如:

```sh
pnpm install @contentful/optimization-web
```

添加 `contentful` 当SDK会使用你的应用软件时 `contentful.js` 用于管理条目的客户端 取来.

导入优化类;支持CJS和无害环境管理模块系统,无害环境管理优先:

```ts
import ContentfulOptimization from '@contentful/optimization-web'
```

配置和初始化优化 Web SDK 每页运行时间一次 :

```ts
const optimization = new ContentfulOptimization({
  spaceId: 'your-space-id',
  environment: 'master',
  locale: 'en-US',
})
```

> \[大
> 
> 初始化 Web SDK 每页运行时间一次 。 重用 `window.contentfulOptimization` 或属于自己的 单吨容器装订,而不是创建额外的实例.

### Vanilla JS网页的使用情况

未使用捆绑器的 HTML 页面可使用 UMD 构建 :

```html
<script src="https://cdn.jsdelivr.net/npm/@contentful/optimization-web@latest/dist/contentful-optimization-web.umd.js"></script>
<script>
  window.contentfulOptimization = new ContentfulOptimization({
    spaceId: 'your-space-id',
    environment: 'master',
    locale: 'en-US',
  })
</script>
```

### 使用网络组件

可选的Web组件入口提供了同一包中的香草自定义元素:

```ts
import { defineContentfulOptimizationElements } from '@contentful/optimization-web/web-components'

defineContentfulOptimizationElements()
```

导入 `@contentful/optimization-web/web-components` 是无副作用的。 自定义元素是 仅在 `defineContentfulOptimizationElements()` 运行,主运行 `@contentful/optimization-web` 入境点不出口或登记它们.

使用 `<ctfl-optimization-root>` 在共享一个 SDK 实例的条目周围:

```html
<ctfl-optimization-root space-id="your-space-id" environment="master" locale="en-US">
  <ctfl-optimized-entry id="hero-entry" hidden>
    <article>Baseline content rendered by your app</article>
  </ctfl-optimized-entry>
</ctfl-optimization-root>
```

用本地语 `hidden` 在原始的 HTML 中,当基线或静态内容之间 个人化解决前,不得出现打开和关闭标记。 要件保留: 演示文稿装入时由生产者自有隐藏,并在选定内容时删除, 基线内容,或已准备返回。 设置 `hidden` 稍后从注册 JavaScript 无法 防止浏览器在自定义元素注册之前将原始标签内容涂上. 选中的选项, 其配置的条目 ID 仍为空 .

将复杂值指定为 DOM 属性, 而不是字符串属性 :

```ts
const root = document.querySelector('ctfl-optimization-root')
const entry = document.querySelector('ctfl-optimized-entry')

root.defaults = { consent: true }
root.api = { preflight: false }
root.contentful = { client: contentfulClient }
root.trackEntryInteraction = { hovers: false }
root.prefetchManagedEntries = [{ contentType: 'page', slug: 'home' }]
root.onStatesReady = (states) => {
  const subscription = states.profile.subscribe((profile) => {
    console.log(profile?.id)
  })

  return () => {
    subscription.unsubscribe()
  }
}

entry.baselineEntry = baselineEntry
entry.addEventListener('ctfl-entry-resolved', (event) => {
  renderHero(event.detail.entry, event.detail.metadata)
})
```

`baselineEntry` 和根键 `contentful` 仅因内容条目和客户端 结构对象。 当 Web SDK 配置时 `contentful: { client }`, (中文(简体) ), `ctfl-optimized-entry` 也可以从 `entry-id`编号 :`entryId` 或通过 `content-type` 财务报告和审定财务报表 `slug`编辑 选项 `slug-field` 属性默认值为 `slug`,则 `entryQuery` 财产用品 CDA 查询值 . `baselineEntry` 优于任一管理来源。 设置根 `prefetchManagedEntries` 属性,用于在根 SDK 准备好后为配置的 SDK 缓存取暖。 对于 框架包装, 指定 `baselineEntry`, (中文(简体) ), `entryQuery`, (中文(简体) ), `sdk`, (中文(简体) ), `defaults`, (中文(简体) ), `api`调用 属性,然后听 `ctfl-entry-loading`, (中文(简体) ), `ctfl-entry-resolved`,以及 `ctfl-entry-error` 使框架拥有的UI。 习惯要素故意不提供 框架中性渲染介质 API。 没有自定义元素但可渲染的框架包装器 仍然使用 Web 演示文稿助手可以导入 `OptimizedEntrySourceController` 财务报告和审定财务报表 `createOptimizedEntryLoadingEntry` 从 `@contentful/optimization-web/presentation` 共享 相同的管理入源生命周期。 只有核心或非网络自定义运行时间适配器可以导入这些 直接从 `@contentful/optimization-core/entry-source` 不取决于 在网络SDK.

更改一个被管理的源属性可追溯到该条目并忽略 stale results. 成功的一击 使用取回的条目查找 `sys.id` 在解决事件和 `data-ctfl-*` 互动跟踪, 不是子弹 只配置一个管理到的源; 将非空条目 ID 与完整的 swit 合并 源输出 `Optimized entry source cannot include both entryId and managedEntry.` 获取 也没有.

每个基线条目编号,第一个选定、基线、保留或超时/倒计时 结果变为显示的内容。 超时或故障是诚实的基准结果:装载结束, 基线内容和跟踪元数据也表示同意。 随着有效的现场更新被禁用, 稍后 定义选择, `undefined`中,待处理状态,失败状态不会替换该内容或 恢复装入。 有效的活性更新接受后来定义的选择. 一个空的 `selectedOptimizations` 数组( r)`[]`)表示不应用选择并解决基线内容 匹配基线跟踪。 此例不同于所选择的选项,其配置的条目 ID 是空的,它仍然隐藏。 不同的基线条目ID开始新的演示文稿.

对于脚本-tag使用,加载主Web SDK UMD捆绑和单独的Web组件 UMD捆绑:

```html
<script src="https://cdn.jsdelivr.net/npm/@contentful/optimization-web@latest/dist/contentful-optimization-web.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@contentful/optimization-web@latest/dist/contentful-optimization-web-components.umd.js"></script>
<script>
  ContentfulOptimizationWebComponents.defineContentfulOptimizationElements()
</script>
```

SSR输出可以包括惰性自定义元素标记. 在客户端,打电话 `defineContentfulOptimizationElements()` 并指定对象属性,然后才会期望条目 决心。 root 共享 SDK 准备状态和预览- panel 活更新状态与后人条目; 项 diff `data-ctfl-*` 主机属性和在断开时清理订阅。 偏好一个根 每个 SDK 实例,除非一个页面真的需要单独的 SDK 所有权 .

## 何时使用此软件包

使用 `@contentful/optimization-web` 用于需要状态化 Web 运行时间的浏览器应用程序 直接,包括同意状态,匿名身份持续,自动进入互动跟踪, 和浏览器边事件发送.

我们建议启动反应应用 [`@contentful/optimization-react-web`](https://github.com/contentful/optimization/blob/optimization-web-v2.1.3/packages/web/frameworks/react-web-sdk/README.md),将这个SDK包起来 与回放提供者,钩子,路由器适配器,和入放原始.

## 通用配置

Web SDK与经验API通信,用于配置和优化选择,并与 insights API用于事件摄入.

| 选项 | 需要吗? | 默认 | 说明 |
| --- | --- | --- | --- |
| `spaceId` | 对 | 不详 | 经验和透视 API 请求的空间标识符 |
| `environment` | 没有 | `'master'` | 经验与洞察 API 请求的内容环境标识符 |
| `api` | 没有 | 参见下面的 API 选项 | API 和 Insights API 端点和请求选项 |
| `app` | 没有 | `undefined` | 将事件上下文附加的应用程序元数据 |
| `contentful` | 没有 | `undefined` | 注册 `contentful.js` 客户端、 默认查询和缓存 |
| `locale` | 没有 | `undefined` | SDK 体验 API 和默认事件 locale |
| `defaults` | 没有 | `undefined` | 初始状态,通常包括同意、持久性同意或剖面值 |
| `allowedEventTypes` | 没有 | `['identify', 'page']` | 在同意未定或虚假的情况下故意允许的事件类型 |
| `autoTrackEntryInteraction` | 没有 | `{ views: true, clicks: true, hovers: true }` | 打开自动跟踪进入视图、点击和盘旋 |
| `cookie` | 没有 | `{ domain: undefined, expires: 365 }` | 匿名身份饼干设置 |
| `getAnonymousId` | 没有 | `undefined` | 用于提供来自应用程序所属身份状态的匿名身份的功能 |
| `queuePolicy` | 没有 | SDK 默认 | Fush 重试行为和下行队列界限 |
| `logLevel` | 没有 | `'error'` | 默认控制台槽的最低日志级别 |
| `onEventBlocked` | 没有 | `undefined` | 当同意屏蔽事件时, 重复调用 |

常见 `api` 选项:

| 选项 | 需要吗? | 默认 | 说明 |
| --- | --- | --- | --- |
| `experienceBaseUrl` | 没有 | `'https://experience.ninetailed.co/'` | 经验 API 的基础 URL |
| `insightsBaseUrl` | 没有 | `'https://ingest.insights.ninetailed.co/'` | 透视 API 的基础 URL |
| `enabledFeatures` | 没有 | `['ip-enrichment', 'location']` | 适用于每项请求的 API 特性 |
| `location` | 没有 | API 倒计时 | 单向可见体验 API 变异的默认位置 |
| `preflight` | 没有 | `false` | 在不存储的情况下聚合一个新的配置状态 |
| `plainText` | 没有 | `true` 用于单发突变; 批量突变使用 `false` | 将符合条件的经验 API 变异作为纯文本 |

设定 `api.location` 在正常 SDK 初始化时, 当应用程序提供请求时 地点 :

```ts
const optimization = new ContentfulOptimization({
  spaceId: 'your-space-id',
  api: { location: { countryCode: 'DE', city: 'Berlin' } },
})
await optimization.page()
```

与 Web 组件根的配置相同 `api` DOM财产. 摆玡 根初始化。 位置被初始化范围,而不是被动设置. 活动 `context.location` 以比对请求字段为准。 一个空的 `api.location: {}` 提供明确的空默认值, 而不是 API 地理定位; 它没有清除现有的配置文件 位置或锁定位置跨越以后的请求。 见 [位置输入和简介更新](https://contentful.github.io/optimization/documents/Documentation.Concepts.Profile_synchronization_between_client_and_server.html#location-inputs-and-profile-updates)。 。 。 .

常见 `fetchOptions` 为: `fetchMethod`, (中文(简体) ), `requestTimeout`, (中文(简体) ), `retries`, (中文(简体) ), `intervalTimeout`, (中文(简体) ), `onFailedAttempt`,以及 `onRequestTimeout`。默认重试仅对 HTTP 适用 `503` 回应.

配置 `allowedEventTypes` 是一个有意的允许名单,而不是临时状态。 网络默认 允许 `identify` 财务报告和审定财务报表 `page` 同意是不确定或虚假的。 设定 `allowedEventTypes: []` 严格 当任何优化活动都不得在接受同意之前发出时,选择进入.

在路由器、 i18n 层或应用程序配置中选择应用程序 Contentful locale 。 传过去 值直接到内容 CDA 请求。 使用顶级 SDK `locale` 当体验 API 响应和事件背景需要使用相同的语言. 见 [优化 SDK 套件中的位置处理](https://contentful.github.io/optimization/documents/Documentation.Concepts.Locale_handling_in_the_Optimization_SDK_Suite.html) 为完整的地方模型.

使用 `optimization.setLocale(nextLocale)` 当应用程序本地化更改时。 方法验证 明确输入、更新 `optimization.locale` 财务报告和审定财务报表 `optimization.states.locale`,并修改 默认体验 API 语言 。 它不获取内容或刷新配置状态; 调用 `page()`, (中文(简体) ), `identify()`,或者当应用程序需要本地化数据用于新地块时,CDA再次使用.

对于每个选项,回调有效载荷和输出类型,使用生成的 [Web SDK 参考](https://contentful.github.io/optimization/modules/_contentful_optimization-web.html)。 。 。 .

## 核心工作流程

### 同意和概况活动

同意是申请政策。 SDK 存储事件同意, 屏蔽事件之前不被允许的事件 同意被接受,并故意允许配置 `allowedEventTypes` 在每一个同意状态. 它可以分别跟踪持久性特征-持久性同意。 用于跨 SDK 同意 指导,见 [优化SDK套件中的同意管理](https://github.com/contentful/optimization/blob/optimization-web-v2.1.3/documentation/concepts/consent-management-in-the-optimization-sdk-suite.md)。 。 。 .

对于不使最终用户同意的默认应用政策,种子接受同意 启动时 :

```ts
const optimization = new ContentfulOptimization({
  spaceId: 'your-space-id',
  defaults: { consent: true },
})
```

```ts
optimization.consent(true)

optimization.consent({ events: true, persistence: false })

const { accepted, data } = await optimization.page({
  properties: { path: window.location.pathname },
})
```

启动默认和布尔同意要求给予或撤销事件同意和持久 默认配置连续性 。 取消事件同意仍然允许配置 `allowedEventTypes`; 使用 `allowedEventTypes: []` 严格选入。 对象形式同意允许事件 保存配置、选中的优化、更改和匿名的 ID 会话时发送到 给予持久性同意.

`page()`, (中文(简体) ), `identify()`, (中文(简体) ), `screen()`, (中文(简体) ), `track()`粘贴 `trackView()` 调用返回事件 结果. `{ accepted: false }` 表示同意或SDK卫士封锁事件. `{ accepted: true, data }` 表示 SDK 接受事件; 接受队列或离线事件可能 还没有数据。 需要流道分解的路由器集成可以调用 `trackCurrentPage()`直接手册 `page()` 电话仍为不中断事件.

### 内容分辨率

当a `contentful.js` 客户端是可用的, 倾向于通过条目 ID 或内容类型获取 SDK 管理 和弹片 :

```ts
const optimization = new ContentfulOptimization({
  spaceId: 'space-id',
  contentful: { client: contentfulClient },
  environment: 'master',
  locale: appLocale,
})

const { baselineEntry, entry } = await optimization.fetchOptimizedEntry({
  contentType: 'page',
  slug: 'home',
  entryQuery: { locale: appLocale },
})
```

`fetchOptimizedEntry(source)` 获取基线条目并用 Web SDK 的当前解决 `selectedOptimizations` 当省略时. `fetchContentfulEntry()` 只执行管理的 CDA 抓取 . 使用 `fetchContentfulEntries()` 或者说 `prefetchManagedEntries()` 当一个页面知道几个管理 来源. `slugField` 默认为 `slug`; 成功的弹片检查和交接使用取来 条目 `sys.id`将规范的描述符嵌入 `managedEntry` 并保留 身份确认 `entryId`等效的ID源保留同干分批和100ID分块.

如果您的应用程序已经获取基线条目, 请继续使用手动解析器 :

```ts
const { accepted, data: optimizationData } = await optimization.page({
  properties: { path: location.pathname },
})
const resolvedEntry = optimization.resolveOptimizedEntry(
  baselineEntry,
  accepted ? optimizationData?.selectedOptimizations : undefined,
)
```

不同内容模式的打字和缩小,见 [条目优化和变量分辨率](https://contentful.github.io/optimization/documents/Documentation.Concepts.Entry_personalization_and_variant_resolution.html#typescript-content-model-choices)。 。 。 .

在任意一条路径中使用一个 CDA 语言 。 对于本地化的应用程序, 请配置您的应用程序本地化并传递它 电话前直接 `getEntry()`, (中文(简体) ), `getEntries()`,或者 SDK 管理的条目获取。 不要通过 全地CDA响应来自 `withAllLocales` 或者说 `locale=*`; 解析器期望直接 单局部字段值。 见 [条目优化和变量分辨率](https://contentful.github.io/optimization/documents/Documentation.Concepts.Entry_personalization_and_variant_resolution.html#single-locale-cda-entry-contract) 进入合同和 [优化 SDK 套件中的位置处理](https://contentful.github.io/optimization/documents/Documentation.Concepts.Locale_handling_in_the_Optimization_SDK_Suite.html) 为更广泛的地方模式.

使用 `getMergeTagValue()` 富足富贵 文本合并标签和 `getFlag()` 自定义旗帜。 如果有的话 合并标签引用本地化配置字段, 如 `location.city` 或者说 `location.country`页:1 解析值遵循经验API返回的本地化配置数据。 网络 SDK 是 状态,所以读出一面旗帜,可以在同意或允许列表时发出去除的旗帜视图跟踪 允许它和配置状态.

### 条目互动跟踪

在条目元素遵循标准数据属性模式时启用了自动跟踪. 过 `false` 对于您应用程序不想观察到的任何交互类型:

```ts
const optimization = new ContentfulOptimization({
  spaceId: 'your-space-id',
  autoTrackEntryInteraction: { hovers: false },
})
```

当 DOM 结构不符合自动观察时使用手动元素覆盖 :

```ts
optimization.tracking.enableElement('views', element, {
  data: {
    entryId: resolvedEntry.entry.sys.id,
    optimizationId: resolvedEntry.selectedOptimization?.experienceId,
    optimizationContextId: resolvedEntry.optimizationContextId,
    variantIndex: resolvedEntry.selectedOptimization?.variantIndex ?? 0,
  },
})
```

`optimizationContextId` 是SDK拥有的用于后续事件浓缩和诊断的背景. 没错 不是一个 API 事件有效载荷域 .

对于检测阈值,数据属性,点击并徘徊行为,以及手动覆盖,使用 [Web SDK 集成指南](https://contentful.github.io/optimization/documents/Documentation.Guides.integrating-the-web-sdk-in-a-web-app.html#7-track-entry-interactions-and-follow-up-events)。 。 。 .

### 国家订阅

状态Web SDK 曝光可观测状态用于UI反馈和集成胶:

```ts
const unsubscribe = optimization.states.profile.subscribe((profile) => {
  console.log(profile?.id)
})
```

常见状态流包括 `consent`, (中文(简体) ), `persistenceConsent`, (中文(简体) ), `profile`, (中文(简体) ), `selectedOptimizations`, (中文(简体) ), `blockedEventStream`, (中文(简体) ), `eventStream`状态。 优化变化是内部的 通过旗帜和进入分辨率消耗的状态,而不是 `optimization.states.changes` 流线。 使用 完整的参考文献 `states` 表面.

## 运行时间笔记

-   浏览器存储持久性是最佳的。 若为 `localStorage` 写入失败, SDK 继续使用 记忆状态,并重复在后续写作中的持久性.
-   `reset()` 清除内部状态和排队事件,但同意和持久性同意除外 防止未完成的工作公布陈旧状态。 当活动配置改变时使用它 .
-   `flush()` 排出排队的 Insights API 和经验 API 事件.
-   浏览器生命周期事件使用 `navigator.sendBeacon()` 为了最后的春斯洞察力.
-   `destroy()` 处理内部反应效应、释放听众和单吨所有权,用于诸如测试之类的明确拆解路径 或热重装工作流程.
-   寿命周期截取器为第一党SDK和预览-平面集成而存在. 大多数应用程序 代码并不直接需要.

## 相关

-   [在网络应用中整合优化 Web SDK](https://contentful.github.io/optimization/documents/Documentation.Guides.integrating-the-web-sdk-in-a-web-app.html) - 说吧 分步浏览器集成指南
-   [Web SDK 生成参考](https://contentful.github.io/optimization/modules/_contentful_optimization-web.html) - 说吧 导出 API 引用
-   [反应 Web SDK](https://github.com/contentful/optimization/blob/optimization-web-v2.1.3/packages/web/frameworks/react-web-sdk/README.md) - 反应提供者、钩子、路由器和 `OptimizedEntry` 构造于此 SDK 的层
-   [网络香草参考实施](https://github.com/contentful/optimization/blob/optimization-web-v2.1.3/implementations/web-sdk/README.md) - 静态网络 页面使用 vanilla JS 即时设置
-   [Web SDK 反应适配器引用执行](https://github.com/contentful/optimization/blob/optimization-web-v2.1.3/implementations/web-sdk_react/README.md) - 说吧 直接在此SDK上方建立本地适配层的反相应用程序

## 常见问题

### @contentful/optimization-web 是什么？

框架不可知网络客户端 SDK 用于内容优化

### 如何安装 @contentful/optimization-web？

在项目目录运行 npm install @contentful/optimization-web，或使用 pnpm add / yarn add / bun add。

### @contentful/optimization-web 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @contentful/optimization-web 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @contentful/optimization-web 可以商用吗？

@contentful/optimization-web 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @contentful/optimization-web 的下载量有多少？

根据 npm 官方下载统计，@contentful/optimization-web 在 2026/10/11 – 2026/11/09 这 30 天内被下载 5,711 次，日均约 190 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @contentful/optimization-web 还在维护吗？

最新版本 2\.1\.3 发布于 2026/11/06（4 天前）；至今共发布 28 个版本，其中过去 12 个月发布了 28 个；首次发布于 2026/02/03。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。

