--- url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/advanced/performance' title: '性能 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T00:44:31+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- DXPR Builder 页面的加载成本取决于模块控制的三件事：编辑器 JavaScript 的来源、模块是否附带加载 Bootstrap，以及已保存 HTML 请求了哪些元素库。本页按代码实现逐一介绍，以便您决定改动什么。通用的 Drupal 建议（图片压缩、CDN、页面缓存设置）此处不再重复；构建器字段的缓存行为请参阅 缓存。 编辑器资源来源 Asset source（Editor Assets 部分的，位于 DXPR Studio > DXPR Builder > General Settings 中）设置了 editor_assets_source： tags: - 'Naar productie' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T09:09:48+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 性能 description: |- DXPR Builder 页面的加载成本取决于模块控制的三件事：编辑器 JavaScript 的来源、模块是否附带加载 Bootstrap，以及已保存 HTML 请求了哪些元素库。本页按代码实现逐一介绍，以便您决定改动什么。通用的 Drupal 建议（图片压缩、CDN、页面缓存设置）此处不再重复；构建器字段的缓存行为请参阅 缓存。 编辑器资源来源 Asset source（Editor Assets 部分的，位于 DXPR Studio > DXPR Builder > General Settings 中）设置了 editor_assets_source： image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T00:44:31+0000' dateModified: '2026-10-24T09:09:48+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/advanced/performance' articleSection: 'Naar productie' - '@type': WebPage '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/advanced/performance' description: |- DXPR Builder 页面的加载成本取决于模块控制的三件事：编辑器 JavaScript 的来源、模块是否附带加载 Bootstrap，以及已保存 HTML 请求了哪些元素库。本页按代码实现逐一介绍，以便您决定改动什么。通用的 Drupal 建议（图片压缩、CDN、页面缓存设置）此处不再重复；构建器字段的缓存行为请参阅 缓存。 编辑器资源来源 Asset source（Editor Assets 部分的，位于 DXPR Studio > DXPR Builder > General Settings 中）设置了 editor_assets_source： breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: 首页 item: 'https://dxpr.com/zh-hans' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: zh-hans --- [Help Center](/zh-hans/node/75)/[Documentation](/zh-hans/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Manage the site](/hc/documentation/learn-dxpr-builder/manage) /[Naar productie](/hc/documentation/learn-dxpr-builder/manage/production) # 性能. Learn DXPR BuilderManage the siteNaar productie ## In this guide Related guides - [缓存](/zh-hans/hc/documentation/learn-dxpr-builder/advanced/caching) - [从本地构建运行编辑器](/zh-hans/hc/documentation/learn-dxpr-builder/customization/editor-assets) - [架构](/zh-hans/hc/documentation/learn-dxpr-builder/development/architecture) DXPR Builder 页面的加载成本取决于模块控制的三件事：编辑器 JavaScript 的来源、模块是否附带加载 Bootstrap，以及已保存 HTML 请求了哪些元素库。本页按代码实现逐一介绍，以便您决定改动什么。通用的 Drupal 建议（图片压缩、CDN、页面缓存设置）此处不再重复；构建器字段的缓存行为请参阅 [缓存](/zh-hans/hc/documentation/learn-dxpr-builder/advanced/caching)。 ## 编辑器资源来源 **Asset source**（**Editor Assets** 部分的，位于 **DXPR Studio** > **DXPR Builder** > **General Settings** 中）设置了 `editor_assets_source`： | 值 | 标签 | 加载内容 | |---|---|---| | `0` | Cloud | 六个编辑器脚本和 `css/dxpr_builder_backend.css`，来自 `https://cdn2.dxpr.com//`，以您的产品密钥作为 `jwt` 查询参数。 | | `1` | Local (minified) | `dxpr_builder/*.min.js`，模块目录中的文件。 | | `2` | Local (unminified) | `dxpr_builder/*.js`（模块目录中），以及 `dxpr_builder/editor.dev`。 | 该设置只在模块目录中存在本地构建时出现。存在时，即使配置的是 Cloud，模块也使用本地文件，因为云端资源只随发行版提供。检查网站使用的来源： ```bash drush config:get dxpr_builder.settings editor_assets_source ``` 六个编辑器脚本从不聚合：云端文件是外部的，本地条目声明了 `preprocess: FALSE` 和 `defer`。编辑器的辅助库（如带 Sortable 和 Draggabilly 的 `dxpr_builder/editor.core`）像其他库一样聚合，下文面向访客的文件也一样。 ## 附带加载 Bootstrap **Sideload Bootstrap files**（`bootstrap`，在 `dxpr_builder.settings` 中）有两个值。使用 **Bootstrap 5** 时，格式化器向每个渲染构建器字段的页面附加 `dxpr_builder/bootstrap_5`（`bootstrap.min.css` 和 `bootstrap.bundle.min.js`，权重均为 `-10`）。使用 **None (theme provides Bootstrap)** 时不附加任何内容。 1. 检查主题是否已加载 Bootstrap 5。 2. 如果已加载，将该选项设为 **None**，让访客只下载一份。 3. 如果没有加载，设为 **Bootstrap 5**；由于负权重，主题自己的 CSS 仍在其后加载。 ## 访客加载的内容 对于没有编辑权限的用户，格式化器附加以下内容： - `dxpr_builder/core`（每个带构建器字段的页面）：`dxpr_builder/css/dxpr_builder.css`（带 `fetchpriority: high`）、`js/css-register-properties.js` 和公共设计令牌。 - `dxpr_builder/frontend.smooth_scroll`(`dxpr_smooth_scroll.min.js`)，每个带构建器字段的页面都有，用于锚点链接。 - `dxpr_builder/editor.frontend`（`dxpr_frontend.min.js`，来源为 `2` 时为未压缩文件），只在动态模式下附加。 当已保存 HTML 引用了 `dxpr_frontend.js` 时，模块将字段切换为动态模式，编辑器会为包含需要 JavaScript 的元素（如计数器、轮播、视差和视频背景）的页面写入该引用。纯文本、图片和按钮的页面保持静态，除了 `core` 和平滑滚动脚本，不附带构建器 JavaScript。 - 每个元素的 `data-dxpr-builder-libraries` 属性命名的库： | 元素 | 附加的库 | 文件 | |---|---|---| | Countdown | `elements.counteverest` | Counteverest CSS 和 JS、`js/counteverest-migrate.js` | | Counter | `elements.countto` | `dxb-count-to.min.js` | | Icon、Circle counter | `elements.icon_helpers` 以及图标集的库 | 图标字体 CSS 和字体文件 | | Social links | `elements.social_icons`、`elements.font_awesome_6_free`、`elements.icon_helpers` | Font Awesome CSS 和字体 | | 带生长动画的 Progress bar | `elements.bootstrap_progress_extension` | 扩展 CSS 和 JS | | 任何带进入动画的元素 | `elements.animate` | `dxpr_animations.min.js`、`native-animations.css` | | 用 Font Awesome 4 或 5 类保存的元素 | `elements.font_awesome_6_free`、`elements.font_awesome_v4_shims` | Font Awesome 和 v4 兼容 CSS | 在动态模式下，`dxpr_frontend.js` 一运行就会添加 Glyphicon、Font Awesome 和 Bootstrap Icons 样式表，其他资源只在页面上的元素需要时加载：带视差效果的版块用 `dxb-parallax.min.js`（勾选 **Disable on mobile**（**Background effects** 下）时，宽度低于 481 像素跳过），带 YouTube 视频背景的版块用 `vendor/managed/plyr/dist/plyr.min.js` 及其 CSS，轮播用 `css/carousel.css`。编辑器在保存时决定页面是否需要动态模式；如果需要，会将 `dxpr_frontend.js` 的小型脚本加载器写入已保存 HTML。 页面中放置的区块和视图在字段渲染时于服务器端渲染；它们自己的库会复制到字段上。 ## 编辑人员加载的内容 对于拥有 `edit with dxpr builder` 权限的用户，页面还会获得： - `dxpr_builder/editor.builder`：`dxpr_templates`、`dxpr_global`、`dxpr_events`、`dxpr_param_types`、`dxpr_elements` 和 `dxpr_builder`，全部延迟加载。 - `dxpr_builder/editor.core`：Sortable、Draggabilly、Floating UI、DXB slider、lz-string、streaming-markdown、base64-js、ET Line、Pixeden 和 Glyphicon 字体，以及 `css/drupal-integration.css`。 - `dxpr_builder/editor.core.styles`（`css/dxpr_builder_backend.css`）、`dxpr_builder/editor.validation`、`dxpr_builder/twig.js`、`dxpr_builder/dxpr_saved_thumbs`，以及启用 Media 模块时的核心 `media/view`。 - CKEditor 5（`vendor/managed/dxpr-cke5-superbuild/dist/ckeditor.js` 及其翻译文件），由 `dxpr_global.js` 在文本编辑初始化时添加。 构建器字段对每个已登录用户（无论是否为编辑人员）都以 `max-age: 0` 渲染，因此 Dynamic Page Cache 不保留它们，每次页面加载都会重新渲染字段。匿名访客获得缓存的字段。 ## 图片 Image 元素的 **Image** 参数让编辑人员选择图片样式。列表包含网站上的所有图片样式：存在的 **Optimize for fast loading** 排第一，**Original image (No resizing)** 排第二。`optimize` 样式随 `config/optional/image.style.optimize.yml` 提供：缩放到 1024 像素宽（不放大），再转为 WebP。除非布局需要更宽的文件，内容图片请选择它。SVG 文件绕过图片样式。 Image 元素写入普通的 ``，带 `src`、`alt`、`title` 和内联宽高。它不添加 `loading="lazy"` 或 `srcset`，因此按 1024 像素定型的图片是每个视口下载的大小。版块背景图片通过 Style 选项卡设置，遵循同样的规则。 设置了封面图时，Video 元素会推迟其 iframe，直到访客点击；请为嵌入视频设置封面图，避免页面加载时加载播放器。 ## 文本格式过滤器 **Apply text format filters to frontend content** (`format_filters`) 在字段为非编辑人员渲染时，每次都通过 `processed_text` 运行字段的文本格式。默认关闭；除非需要对访客输出运行某个过滤器，否则保持关闭。 ## 接下来做什么？ - [缓存](/zh-hans/hc/documentation/learn-dxpr-builder/advanced/caching)：模块使用的缓存上下文、标签和内部缓存。 - [编辑器资源](/zh-hans/hc/documentation/learn-dxpr-builder/customization/editor-assets)：资源来源设置。 - [架构](/zh-hans/hc/documentation/learn-dxpr-builder/development/architecture)：附加这些库的代码。