YiiのAsset Managerを使用してCSSおよびJavaScriptファイルを管理するにはどうすればよいですか？

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

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

Asset Managerを使用するには、最初にAsset Bundleを作成する必要があります。これは通常、 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ファイルをリストします。 dependsこのバンドルが依存している他の資産バンドルを指定します（この場合、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ファイルを自動的に含める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のAsset Managerを使用してCSSおよびJavaScriptファイルを管理するにはどうすればよいですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。