--- url: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/advanced/performance' title: '성능 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T01:39:30+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, 페이지 캐시 설정)은 여기에서 반복하지 않습니다. 빌더 필드의 캐시 동작은 Caching 문서를 참고하세요. 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, 페이지 캐시 설정)은 여기에서 반복하지 않습니다. 빌더 필드의 캐시 동작은 Caching 문서를 참고하세요. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T01:39:30+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/ko/hc/documentation/learn-dxpr-builder/advanced/performance' articleSection: 'Naar productie' - '@type': WebPage '@id': 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/advanced/performance' description: |- DXPR Builder 페이지를 불러오는 데 드는 비용은 모듈이 제어하는 세 가지에 달려 있습니다. 에디터 JavaScript의 출처, 모듈의 Bootstrap 사이드로드 여부, 저장된 HTML이 요청하는 요소 라이브러리입니다. 이 페이지에서는 코드가 구현한 대로 각 항목을 설명하므로 무엇을 바꿀지 결정할 수 있습니다. 일반적인 Drupal 조언(이미지 압축, CDN, 페이지 캐시 설정)은 여기에서 반복하지 않습니다. 빌더 필드의 캐시 동작은 Caching 문서를 참고하세요. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: 홈 item: 'https://dxpr.com/ko' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: ko --- [Help Center](/ko/node/75)/[Documentation](/ko/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 - [캐싱](/ko/hc/documentation/learn-dxpr-builder/advanced/caching) - [소스에서 에디터 빌드](/ko/hc/documentation/learn-dxpr-builder/customization/editor-assets) - [아키텍처](/ko/hc/documentation/learn-dxpr-builder/development/architecture) DXPR Builder 페이지를 불러오는 데 드는 비용은 모듈이 제어하는 세 가지에 달려 있습니다. 에디터 JavaScript의 출처, 모듈의 Bootstrap 사이드로드 여부, 저장된 HTML이 요청하는 요소 라이브러리입니다. 이 페이지에서는 코드가 구현한 대로 각 항목을 설명하므로 무엇을 바꿀지 결정할 수 있습니다. 일반적인 Drupal 조언(이미지 압축, CDN, 페이지 캐시 설정)은 여기에서 반복하지 않습니다. 빌더 필드의 캐시 동작은 [Caching](/ko/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**(`dxpr_builder.settings`의 `bootstrap`)에는 두 값이 있습니다. **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 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 요소는 ``(을)를 `src`, `alt`, `title`, 인라인 너비 및 높이와 함께 일반 태그로 기록합니다. `loading=\"lazy\"`나 `srcset`(을)를 추가하지 않으므로, 1024픽셀로 스타일된 이미지는 모든 뷰포트에서 다운로드됩니다. 섹션 배경 이미지는 Style 탭에서 설정되며 같은 규칙을 따릅니다. Video 요소는 포스터 이미지가 설정되면 방문자가 클릭할 때까지 iframe을 미룹니다. 페이지 로드 시 플레이어가 불러와지지 않도록 삽입된 동영상에 포스터를 설정하세요. ## 텍스트 형식 필터 **Apply text format filters to frontend content**(`format_filters`)는 에디터가 아닌 사용자에게 필드가 렌더링될 때마다 필드의 텍스트 형식을 `processed_text`(으)로 실행합니다. 기본적으로 꺼져 있습니다. 방문자 출력에 필터를 실행해야 하는 경우가 아니라면 꺼진 상태로 두세요. ## 다음 단계 - [Caching](/ko/hc/documentation/learn-dxpr-builder/advanced/caching) 문서에서 모듈이 사용하는 캐시 컨텍스트, 태그, 내부 캐시를 확인하세요. - [Editor assets](/ko/hc/documentation/learn-dxpr-builder/customization/editor-assets) 문서에서 에셋 소스 설정을 확인하세요. - [Architecture](/ko/hc/documentation/learn-dxpr-builder/development/architecture) 문서에서 이러한 라이브러리를 연결하는 코드를 확인하세요.