성능.

Learn DXPR BuilderBuild pagesVolg een tutorial

DXPR Builder 페이지 로드 비용은 모듈이 제어하는 세 가지에 달려 있습니다. 에디터 JavaScript 출처, 모듈의 Bootstrap 사이드로드 여부, 저장된 HTML이 요청하는 요소 라이브러리입니다. 이 페이지에서는 코드 구현 그대로 각각을 설명하므로 변경할 항목을 정할 수 있습니다. 일반적인 Drupal 조언(이미지 압축, CDN, 페이지 캐시 설정)은 반복하지 않습니다. 빌더 필드의 캐시 동작은 Caching을 참조합니다.

에디터 애셋 소스

Asset source는 Editor Assets 섹션의 DXPR Studio > DXPR Builder > General Settings에서 editor_assets_source를 설정합니다.

Value Label What loads
0 Cloud 6개 에디터 스크립트와 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

6개 에디터 스크립트는 절대 집계되지 않습니다. 클라우드 파일은 외부 파일이며, 로컬 항목은 preprocess: FALSE와 defer로 선언됩니다. Sortable과 Draggabilly가 있는 dxpr_builder/editor.core 같은 에디터 헬퍼 라이브러리는 다른 라이브러리처럼 집계되며, 아래 방문자용 파일도 마찬가지입니다.

Bootstrap 사이드로딩

Sideload Bootstrap files(bootstrap in 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 속성에 지정된 라이브러리:
Element Library attached Files
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 shim 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용 작은 스크립트 로더를 씁니다.

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

에디터가 로드하는 항목

다음 권한이 있는 사용자의 페이지에는 다음도 추가됩니다. 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에서 이러한 라이브러리를 연결하는 코드를 확인합니다.