# @contentful/optimization-web-preview-panel 中文文档 规范地址：https://npmcn.com/package/%40contentful/optimization-web-preview-panel/ 版本：2\.0\.6 npm 元数据更新时间：2026-11-06T12:30:12.921Z 中文译文更新时间：2026-11-10T19:51:53.170Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40contentful/optimization-web-preview-panel 原文对照：https://npmcn.com/package/%40contentful/optimization-web-preview-panel/?lang=original 项目主页：https://github.com/contentful/optimization#readme 源码仓库：https://github.com/contentful/optimization ## 关键信息（来自 npm 元数据） - 包体积（解压后）：1 MB，13 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：6 个 - 首次发布：2026-02-10T09:15:29.706Z - 最新版本发布：2026-11-06T12:30:12.701Z - 近 30 天下载量：2987（2026-10-11 至 2026-11-09，npm 官方下载统计） - 已发布版本数：25（近 12 个月 25 个） ## 中文简介 内容优化网络集成预览面板 UI ## 安装 ```sh npm install @contentful/optimization-web-preview-panel ``` 也可以使用：`pnpm add @contentful/optimization-web-preview-panel`、`yarn add @contentful/optimization-web-preview-panel`、`bun add @contentful/optimization-web-preview-panel` ## README [![Contentful Logo](https://raw.githubusercontent.com/contentful/optimization/optimization-web-preview-panel-v2.0.6/contentful-icon.png "Contentful")](https://www.contentful.com/developers/docs/personalization/) # 内容个性化分析 ### 优化网络预览面板 [指南](https://contentful.github.io/optimization/documents/Documentation.Guides.html) • 妇女 [参考文献](https://contentful.github.io/optimization) • 妇女 [捐款](https://github.com/contentful/optimization/blob/optimization-web-preview-panel-v2.0.6/CONTRIBUTING.md) 此软件包执行首端浏览器预览面板 [优化 Web SDK](https://github.com/contentful/optimization/blob/optimization-web-preview-panel-v2.0.6/packages/web/web-sdk/README.md)。它作为基于 Lit 的网络组件加载到 DOM 中 微前端和通过优化网络所暴露的预览桥向 Web SDK 说话 SDK运行时间. > \[大 > > 从v1升级? 跟着 [v1-v2 迁移指南](https://contentful.github.io/optimization/documents/Documentation.Guides.migrating-optimization-sdk-packages-from-v1-to-v2.html) 并与升级的 Web SDK 软件包对齐此软件包. 目录 - [开始](https://npmcn.com/package/%40contentful/optimization-web-preview-panel/#readme-getting-started) - [何时使用此软件包](https://npmcn.com/package/%40contentful/optimization-web-preview-panel/#readme-when-to-use-this-package) - [前置条目](https://npmcn.com/package/%40contentful/optimization-web-preview-panel/#readme-pre-fetched-entries) - [通用配置](https://npmcn.com/package/%40contentful/optimization-web-preview-panel/#readme-common-configuration) - [生产捆绑控制](https://npmcn.com/package/%40contentful/optimization-web-preview-panel/#readme-production-bundle-control) - [内容安全政策支助](https://npmcn.com/package/%40contentful/optimization-web-preview-panel/#readme-content-security-policy-support) - [相关](https://npmcn.com/package/%40contentful/optimization-web-preview-panel/#readme-related) ## 开始 使用与国家预防机制兼容的软件包管理器安装,例如: ```sh pnpm add @contentful/optimization-web-preview-panel ``` 导入附加功能;支持CJS和无害环境管理模块系统,无害环境管理优先: ```ts import attachOptimizationPreviewPanel from '@contentful/optimization-web-preview-panel' ``` 将预览面板与已有的,未修改的内容交付 API 客户端相接. 默认, 附加函数使用由优化Web SDK创建的浏览器单通: ```ts attachOptimizationPreviewPanel({ contentful: contentfulClient, }) ``` 当您的应用程序已经获取预览内容时, 通过 `entries` 相反: ```ts attachOptimizationPreviewPanel({ entries: { audiences: audienceEntries, experiences: experienceEntries, }, }) ``` 附加函数将面板附加到 DOM 上并添加打开它的切换按钮. 没错 安全地拨打不止一次; 反复拨打重复使用飞行中或完成的接驳板附件。 这个 面板搜索对观众使用模糊匹配并优化名称和亮点匹配文本 结果列表. > \[大 > > 导入此软件包没有副作用 。 它不附加面板,定义自定义元素, 插入样式、 触摸存储或变异全局 `attachOptimizationPreviewPanel(...)` 实值 电话. ## 何时使用此软件包 使用 `@contentful/optimization-web-preview-panel` 当Web SDK或React Web SDK集成需要时 已存在的 Contentful SDK 客户端上的浏览器预览面板。 应用程序代码可以通过 一个明显的优化 Web SDK 实例,但常见浏览器流量使用 `window.contentfulOptimization`。 。 。 . ## 前置条目 使用 `entries` 当应用程序不能给浏览器预览面板一个直接内容客户端时,或者当 它已经拥有查询层。 这包括图QL 查询适配器、 氢加载器、 SSR 数据 交接、标签过滤内容查询和代理 API . 这个 `entries` 选项有此形状: ```ts attachOptimizationPreviewPanel({ entries: { audiences, experiences, }, }) ``` 每个值既可以是Contentful风格的条目收藏,也可以是只读的Contentful系列 条目。 预览面板将数组正常化为条目收藏,只保留 `nt_audience` 项目 从 `audiences`,仅保留 `nt_experience` 来自 `experiences`,并保留 `experiences.includes.Entry` 因此可以显示链接的变体名称. 如果两者兼有 `entries` 财务报告和审定财务报表 `contentful` 提供, `entries` 胜利且预览面板不获取 通过内容客户端. 常见路径 : - **内容客户端** - 通过 `contentful` 首先当浏览器可以使用已有的内容时 发送API客户端. - **图QL** - 将图表QL 节点映射到内容性条目对象,然后通过数组为 `entries.audiences` 财务报告和审定财务报表 `entries.experiences`。 。 。 . - **氢加载机和苏维埃** - 在装载器或服务器路线上装入受众和经验, 串行到浏览器中,然后随附 `entries`。 。 。 . - **标签过滤查询** - 直接通过过滤内容集。 还是小组 在构建定义之前按内容类型过滤. - **代理 APIs** - 回来 `{ audiences, experiences }` 从代理中取出,然后将该对象作为 `entries`。 。 。 . ## 通用配置 | 选项 | 需要吗? | 默认 | 说明 | | --- | --- | --- | --- | | `contentful` | 有条件 | 不详 | 用于读取预览内容的现有内容客户端 | | `entries` | 有条件 | 不详 | 预选受众和经验条目 | | `optimization` | 没有 | `window.contentfulOptimization` | 现有优化 Web SDK 实例 | | `nonce` | 没有 | `undefined` | 当启用严格的CSP时, CSP 非ce 应用到 Lit 样式 | 提供其中之一 `contentful` 或者说 `entries`。 。 。 . 对于完整的附加函数签名,请使用生成的 [预览面板参考](https://contentful.github.io/optimization/modules/_contentful_optimization-web-preview-panel.html)。 。 。 . ## 生产捆绑控制 预览面板用于开发和建构。 消费者自己制定政策 并可以在环境支持的条件中将附件调用封装: ```ts import attachOptimizationPreviewPanel from '@contentful/optimization-web-preview-panel' if (import.meta.env.PUBLIC_OPTIMIZATION_ENABLE_PREVIEW_PANEL === 'true') { void attachOptimizationPreviewPanel({ contentful: contentfulClient }) } ``` 当消费者捆绑者用建设时间来取代这个条件时 `false` 值和履行 dead-code 消除后,可删除预览面板导入图 生产产出. ## 内容安全政策支助 在严格的CSP环境中,直接通过非ce: ```ts attachOptimizationPreviewPanel({ contentful: contentfulClient, nonce }) ``` 或者设置 `window.litNonce` 在附载面板之前: ```ts window.litNonce = nonce attachOptimizationPreviewPanel({ contentful: contentfulClient }) ``` ## 相关 - [预览面板生成参考](https://contentful.github.io/optimization/modules/_contentful_optimization-web-preview-panel.html) - 说吧 导出附加函数引用 - [优化 Web SDK](https://github.com/contentful/optimization/blob/optimization-web-preview-panel-v2.0.6/packages/web/web-sdk/README.md) - 提供预览桥的浏览器SDK - [优化反应 Web SDK](https://github.com/contentful/optimization/blob/optimization-web-preview-panel-v2.0.6/packages/web/frameworks/react-web-sdk/README.md) - 常用的反应层 带有预览面板 - [反应网络集成指南](https://contentful.github.io/optimization/documents/Documentation.Guides.integrating-the-react-web-sdk-in-a-react-app.html#preview-panel) - 说吧 react 应用程序中的预览设置 ## 常见问题 ### @contentful/optimization-web-preview-panel 是什么？ 内容优化网络集成预览面板 UI ### 如何安装 @contentful/optimization-web-preview-panel？ 在项目目录运行 npm install @contentful/optimization-web-preview-panel，或使用 pnpm add / yarn add / bun add。 ### @contentful/optimization-web-preview-panel 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @contentful/optimization-web-preview-panel 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @contentful/optimization-web-preview-panel 可以商用吗？ @contentful/optimization-web-preview-panel 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @contentful/optimization-web-preview-panel 的下载量有多少？ 根据 npm 官方下载统计，@contentful/optimization-web-preview-panel 在 2026/10/11 – 2026/11/09 这 30 天内被下载 2,987 次，日均约 100 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @contentful/optimization-web-preview-panel 还在维护吗？ 最新版本 2\.0\.6 发布于 2026/11/06（4 天前）；至今共发布 25 个版本，其中过去 12 个月发布了 25 个；首次发布于 2026/02/10。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。