性能.
DXPR Builder 页面的加载成本取决于模块控制的三件事：编辑器 JavaScript 的来源、模块是否附带加载 Bootstrap，以及已保存 HTML 请求了哪些元素库。本页按代码实现逐一介绍，以便您决定改动什么。通用的 Drupal 建议（图片压缩、CDN、页面缓存设置）此处不再重复；构建器字段的缓存行为请参阅 缓存。
编辑器资源来源
Asset source（Editor Assets 部分的，位于 DXPR Studio > DXPR Builder > General Settings 中）设置了 editor_assets_source：
| 值 | 标签 | 加载内容 |
|---|---|---|
0 |
Cloud | 六个编辑器脚本和 css/dxpr_builder_backend.css，来自 https://cdn2.dxpr.com/<version>/，以您的产品密钥作为 jwt 查询参数。 |
1 |
Local (minified) | dxpr_builder/*.min.js，模块目录中的文件。 |
2 |
Local (unminified) | dxpr_builder/*.js（模块目录中），以及 dxpr_builder/editor.dev。 |
该设置只在模块目录中存在本地构建时出现。存在时，即使配置的是 Cloud，模块也使用本地文件，因为云端资源只随发行版提供。检查网站使用的来源：
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) 时不附加任何内容。
- 检查主题是否已加载 Bootstrap 5。
- 如果已加载，将该选项设为 None，让访客只下载一份。
- 如果没有加载，设为 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 元素写入普通的 <img>，带 src、alt、title 和内联宽高。它不添加 loading="lazy" 或 srcset，因此按 1024 像素定型的图片是每个视口下载的大小。版块背景图片通过 Style 选项卡设置，遵循同样的规则。
设置了封面图时，Video 元素会推迟其 iframe，直到访客点击；请为嵌入视频设置封面图，避免页面加载时加载播放器。
文本格式过滤器
Apply text format filters to frontend content (format_filters) 在字段为非编辑人员渲染时，每次都通过 processed_text 运行字段的文本格式。默认关闭；除非需要对访客输出运行某个过滤器，否则保持关闭。