YII의 자산 관리자를 사용하여 CSS 및 JavaScript 파일을 관리하려면 어떻게해야합니까?

YII의 자산 관리자를 사용하여 CSS 및 JavaScript 파일을 관리하는 방법

YII의 자산 관리자는 YII 애플리케이션에 CSS 및 JavaScript 파일을 포함하고 관리하는 간소화 된 방법을 제공합니다. 뷰에 <link> 및 <script></script> 태그를 수동으로 추가하는 대신 번들을 그룹 관련 자산에 사용합니다. 이 접근법은 더 나은 조직, 유지 관리 및 성능을 촉진합니다.

자산 관리자를 사용하려면 먼저 자산 번들을 만들어야합니다. 이것은 일반적으로 yii\web\AssetBundle 클래스를 확장하여 수행됩니다. 이 클래스 내에서 자산 (CSS 및 JS 파일)이 포함 된 소스 경로, 자산이 제공 될 게시 된 URL 및 포함 할 CSS 및 JS 파일 목록을 지정합니다.

 <code class="php"><?php namespace app\assets; use yii\web\AssetBundle; class AppAsset extends AssetBundle { public $basePath = &#39;@webroot&#39;; public $baseUrl = &#39;@web&#39;; public $css = [ &#39;css/site.css&#39;, ]; public $js = [ &#39;js/site.js&#39;, ]; public $depends = [ &#39;yii\web\YiiAsset&#39;, &#39;yii\bootstrap5\BootstrapAsset&#39;, ]; }</code></code>

이 예제는 AppAsset 번들을 만듭니다. basePath 및 baseUrl 각각 서버와 해당 URL의 자산 위치를 정의합니다. css 및 js 배열에는 CSS 및 JavaScript 파일이 나와 있습니다. 이 번들이 의존하는 다른 자산 번들 (이 경우 YII의 핵심 자산 및 부트 스트랩 5)을 지정 depends .

마지막으로 $this->registerAssetBundle() 사용하여 자산 번들을 뷰에 등록합니다.

 <code class="php"><?php use app\assets\AppAsset; AppAsset::register($this); ?>    <title>My Yii Application</title>   <h1 id="Hello-Yii">Hello, Yii!</h1>  </code>

이렇게하면 HTML의 섹션에 지정된 CSS 및 JavaScript 파일을 자동으로 포함하여 AppAsset 번들을 등록합니다.

수동 포함에 대한 YII의 자산 관리자 사용의 이점

YII의 자산 관리자를 사용하면 자산을 포함하여 수동으로 몇 가지 이점이 있습니다.

• 조직 : 자산은 번들로 그룹화되어 코드베이스를 더 깨끗하고 유지 관리하기 쉽습니다. 자산을 찾고 관리하는 것이 훨씬 간단 해집니다.
• 유지 관리 : 자산 경로 또는 종속성 변경은 자산 번들 정의 내에서 중앙에서 관리되므로 업데이트하거나 리팩토링 할 때 오류의 위험이 줄어 듭니다.
• 성능 : YII의 자산 관리자는 미니 화, 결합 및 캐싱과 같은 기능을 통해 자산 로딩을 최적화하여 페이지로드 시간이 빠릅니다.
• 종속성 관리 : depends 부동산은 필요한 자산이 자동으로 포함되도록하여 충돌을 방지하고 올바른 기능을 보장합니다.
• 버전화 및 캐싱 : 자산 관리자는 자동으로 자산 버전 및 캐싱을 처리하여 서버로드를 줄이고 성능을 향상시킵니다. 이것은 자주 접근하는 자산에 특히 중요합니다.

YII의 자산 관리자를 사용하여 자산 로딩 성능 최적화

YII의 자산 관리자는 자산 로딩 성능을 최적화하기위한 몇 가지 메커니즘을 제공합니다.

• 미니 화 : 빌드 프로세스 중에 CSS 및 JavaScript 파일을 자동으로 최소화하여 파일 크기를 줄이고로드 시간을 개선하도록 자산 관리자를 구성 할 수 있습니다. 확장 또는 사용자 정의 구성을 통해 수행 할 수 있습니다.
• 결합 : 번들 내의 자산을 더 적은 파일로 결합하여 모든 자산을로드하는 데 필요한 HTTP 요청 수를 줄일 수 있습니다. 이것은 페이지로드 속도를 크게 향상시킵니다.
• 캐싱 : 자산 관리자는 캐싱을 활용하여 중복 처리를 피하고 성능을 향상시킵니다. 자산은 서버 및 클라이언트 측에 캐시되어 서버의 부하를 줄이고 후속 요청 속도를 높입니다.
• 압축 : 서버 레벨에서 GZIP 압축을 활성화하여 네트워크를 통해 전송 된 자산의 크기를 더욱 줄일 수 있습니다.
• 비동기로드 : 자산을 비동기로로드하여 페이지 컨텐츠의 렌더링 차단을 방지하여 사용자의 인식 된 성능을 향상시킬 수 있습니다. 이것은 <script></script> 태그를 신중하게 배치하거나 코드 분할과 같은 고급 기술을 사용하여 달성 할 수 있습니다.

다른 다발이나 위치에서 자산을 처리합니다

YII의 자산 관리자는 다양한 번들과 위치에서 자산 관리를 쉽게 지원합니다. 당신은 당신의 관점에서 여러 자산 번들을 등록 할 수 있으며, 각 번들은 자체 소스 경로와 종속성을 가질 수 있습니다. 이를 통해 자산 관리에 대한 모듈 식 접근법이 가능합니다.

다른 디렉토리 또는 외부 소스 (예 : CDN)에 위치한 자산의 경우, 그에 따라 자산 번들의 basePath 및 baseUrl 속성을 조정합니다. depends 속성을 사용하면 종속성 트리를 만들어 자산이 올바른 순서에 포함되고 충돌을 방지 할 수 있습니다. 번들에 속하지 않는 개별 파일에 $this->registerCssFile() 및 $this->registerJsFile() 사용할 수도 있습니다.

이러한 기능을 활용하면 YII 애플리케이션에서 CSS 및 JavaScript 파일의로드를 효과적으로 관리하고 최적화하여보다 효율적이고 사용자 친화적 인 경험을 제공 할 수 있습니다.

위 내용은 YII의 자산 관리자를 사용하여 CSS 및 JavaScript 파일을 관리하려면 어떻게해야합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!