성능.

Learn DXPR BuilderManage the siteNaar productie

DXPR Builder 페이지를 불러오는 데 드는 비용은 모듈이 제어하는 세 가지에 달려 있습니다. 에디터 JavaScript의 출처, 모듈의 Bootstrap 사이드로드 여부, 저장된 HTML이 요청하는 요소 라이브러리입니다. 이 페이지에서는 코드가 구현한 대로 각 항목을 설명하므로 무엇을 바꿀지 결정할 수 있습니다. 일반적인 Drupal 조언(이미지 압축, CDN, 페이지 캐시 설정)은 여기에서 반복하지 않습니다. 빌더 필드의 캐시 동작은 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/<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(dxpr_builder.settings의 bootstrap)에는 두 값이 있습니다. 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 with grow animation	`elements.bootstrap_progress_extension`	확장 CSS와 JS
Any element with an entrance animation	`elements.animate`	`dxpr_animations.min.js`, `native-animations.css`
Elements saved with Font Awesome 4 or 5 classes	`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(너비가 481픽셀 미만에서는 건너뜀. Disable on mobile(Background effects 아래)이 선택된 경우), YouTube 동영상 배경이 있는 섹션용 vendor/managed/plyr/dist/plyr.min.js와 CSS, 캐러셀용 css/carousel.css가 해당됩니다. 에디터는 저장 시점에 페이지에 동적 모드가 필요한지 결정합니다. 필요하면 저장된 HTML에 dxpr_frontend.js용 작은 스크립트 로더를 기록합니다.

페이지에 배치된 블록과 뷰는 필드가 렌더링될 때 서버에서 렌더링되며, 자체 라이브러리가 필드에 복사됩니다.

편집자가 불러오는 항목

사용자에게 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 슬라이더, 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(으)로 실행합니다. 기본적으로 꺼져 있습니다. 방문자 출력에 필터를 실행해야 하는 경우가 아니라면 꺼진 상태로 두세요.

다음 단계

Caching 문서에서 모듈이 사용하는 캐시 컨텍스트, 태그, 내부 캐시를 확인하세요.
Editor assets 문서에서 에셋 소스 설정을 확인하세요.
Architecture 문서에서 이러한 라이브러리를 연결하는 코드를 확인하세요.