YIIの資産マネージャーを使用してCSSとJavaScriptファイルを管理する方法

YiiのAsset Managerは、YIIアプリケーションにCSSおよびJavaScriptファイルを含めると管理するための合理化された方法を提供します。ビューに<link>および<script></script>タグを手動(dòng)で追加する代わりに、グループ関連の資産にバンドルを利用します。このアプローチは、より良い組織、保守性、パフォーマンスを促進(jìn)します。

Asset Managerを使用するには、最初にAsset Bundleを作成する必要があります。これは通常、 yii\web\AssetBundleクラスを拡張することで行われます。このクラス內(nèi)で、資産（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ファイルをリストします。 dependsこのバンドルが依存している他の資産バンドルを指定します（この場(chǎng)合、YIIのコア資産とブートストラップ5）。

最後に、 $this->registerAssetBundle()を使用して、ビューでアセットバンドルを登録します。

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

これにより、HTMLのセクションに指定されたCSSおよびJavaScriptファイルを自動(dòng)的に含めるAppAssetバンドルが登録されます。

手動(dòng)インクルージョンよりもYIIの資産マネージャーを使用することの利點(diǎn)

Yiiの資産マネージャーを使用すると、資産を含む手動(dòng)でいくつかの利點(diǎn)があります。

• 組織：資産はバンドルにグループ化され、コードベースがクリーナーでメンテナンスが容易になります。資産の検索と管理は大幅に簡(jiǎn)単になります。
• 保守性：資産パスまたは依存関係の変更は、アセットバンドル定義內(nèi)で中央に管理され、更新またはリファクタリング時(shí)にエラーのリスクを減らします。
• パフォーマンス： YIIのアセットマネージャーは、縮小、結(jié)合、キャッシュなどの機(jī)能を介して資産の読み込みを最適化し、ページの読み込み時(shí)間を速くします。
• 依存関係管理： dependsプロパティは、必要な資産が自動(dòng)的に含まれていることを保証し、競(jìng)合を防ぎ、正しい機(jī)能を確保します。
• バージョン化とキャッシュ：アセットマネージャーは、アセットのバージョン化とキャッシュを自動(dòng)的に処理し、サーバーの負(fù)荷を削減し、パフォーマンスの改善を処理します。これは、頻繁にアクセスされる資産にとって特に重要です。

YIIの資産マネージャーを使用した資産の負(fù)荷パフォーマンスを最適化します

Yiiの資産マネージャーは、資産の負(fù)荷パフォーマンスを最適化するためのいくつかのメカニズムを提供します。

• 模倣：ビルドプロセス中にCSSおよびJavaScriptファイルを自動(dòng)的に削除するようにアセットマネージャーを構(gòu)成し、ファイルサイズを削減し、負(fù)荷時(shí)間を改善できます。これは、拡張機(jī)能またはカスタム構(gòu)成で実行できます。
• 組み合わせ：バンドル內(nèi)の資産をより少ないファイルに組み合わせて、すべての資産をロードするのに必要なHTTP要求の數(shù)を減らすことができます。これにより、ページの負(fù)荷速度が大幅に向上します。
• キャッシュ：資産マネージャーはキャッシュを利用して、冗長(zhǎng)処理を回避し、パフォーマンスを向上させます。アセットはサーバーとクライアント側(cè)にキャッシュされ、サーバーの負(fù)荷が減少し、その後のリクエストが高速化されます。
• 圧縮： GZIP圧縮をサーバーレベルで有効にして、ネットワーク上で転送される資産のサイズをさらに削減できます。
• 非同期ロード：ページコンテンツのレンダリングのブロックを防ぎ、ユーザーの知覚パフォーマンスを改善するために、非同期的に資産をロードできます。これは、 <script></script>タグを慎重に配置するか、コード分割などの高度な手法を使用することで実現(xiàn)できます。

さまざまなバンドルまたは場(chǎng)所からの資産の処理

Yiiの資産マネージャーは、さまざまなバンドルや場(chǎng)所から資産の管理を容易にサポートしています。ビューで複數(shù)のアセットバンドルを登録できます。各バンドルには、獨(dú)自のソースパスと依存関係があります。これにより、資産を管理するためのモジュール式アプローチが可能になります。

異なるディレクトリまたは外部ソース（たとえば、CDN）にある資産の場(chǎng)合、それに応じて、資産バンドルのbasePathとbaseUrlプロパティを調(diào)整するだけです。 dependsプロパティを使用すると、依存関係ツリーを作成し、アセットが正しい順序に含まれ、競(jìng)合を防ぐことができます。 $this->registerCssFile()および$this->registerJsFile()を使用することもできます。

これらの機(jī)能を活用することにより、YIIアプリケーションでCSSおよびJavaScriptファイルのロードを効果的に管理および最適化し、より効率的でユーザーフレンドリーなエクスペリエンスをもたらすことができます。

以上がYiiのAsset Managerを使用してCSSおよびJavaScriptファイルを管理するにはどうすればよいですか？の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。