Wie kann ich den Asset -Manager von YII verwenden, um CSS und JavaScript -Dateien zu verwalten?

So verwenden Sie den Asset Manager von YII, um CSS und JavaScript -Dateien zu verwalten

Der Asset Manager von YII bietet eine optimierte Möglichkeit, CSS- und JavaScript -Dateien in Ihre YII -Anwendungen einzubeziehen und zu verwalten. Anstatt in Ihren Ansichten <link> und <script></script> -Tags manuell hinzuzufügen, verwenden Sie Bündel zu gruppenbezogenen Vermögenswerten. Dieser Ansatz fördert eine bessere Organisation, Wartbarkeit und Leistung.

Um den Asset Manager zu verwenden, müssen Sie zunächst ein Asset -Bundle erstellen. Dies erfolgt typischerweise durch Erweiterung der yii\web\AssetBundle -Klasse. Innerhalb dieser Klasse geben Sie den Quellpfad an, der Ihre Vermögenswerte (CSS- und JS -Dateien), die veröffentlichte URL enthält, in der das Vermögen bedient wird, und eine Liste von CSS- und JS -Dateien, die enthalten sind.

 <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>

In diesem Beispiel wird ein AppAsset -Bundle erstellt. basePath und baseUrl definieren den Ort der Vermögenswerte auf dem Server bzw. deren URL. css und js -Arrays listen die CSS- und JavaScript -Dateien auf. depends von anderen Asset -Bündeln, auf die dieses Bündel angewiesen ist (in diesem Fall sind die Kernvermögenswerte von YII und Bootstrap 5).

Schließlich registrieren Sie das Asset-Bundle in Ihrer Ansicht unter Verwendung von $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>

Dies registriert das AppAsset -Bundle, das automatisch die angegebenen CSS- und JavaScript -Dateien im Abschnitt Ihres HTML -Abschnitts enthält.

Vorteile der Verwendung von YIIs Asset Manager über manuelle Inklusion

Die Verwendung von YIIs Asset Manager bietet mehrere Vorteile gegenüber manuell einschließlich Vermögenswerten:

• Organisation: Vermögenswerte werden in Bündel eingeteilt, wodurch Ihr Codebasis sauberer und leichter zu warten ist. Das Finden und Verwalten von Vermögenswerten wird erheblich einfacher.
• Wartbarkeit: Änderungen an Vermögenswegen oder Abhängigkeiten werden in der Definition von Asset -Bundle zentral verwaltet, wodurch das Risiko von Fehlern beim Aktualisieren oder Wiederaufbauern verringert wird.
• Leistung: Der Asset -Manager von YII optimiert das Laden von Assets durch Merkmale wie Minifikation, Kombinieren und Zwischenspeichern, was zu schnelleren Seitenladezeiten führt.
• Abhängigkeitsverwaltung: Die depends Eigenschaft stellt sicher, dass die erforderlichen Vermögenswerte automatisch enthalten sind, um Konflikte zu vermeiden und die korrekte Funktionalität zu gewährleisten.
• Versioning und Caching: Der Asset -Manager kümmert sich automatisch mit der Versionierung und dem Caching von Assets, reduziert die Serverlast und die Verbesserung der Leistung. Dies ist besonders wichtig für häufig zugegriffene Vermögenswerte.

Optimierung der Ladeleistung von Asset mit dem Asset Manager von YII.

Der Asset Manager von YII bietet mehrere Mechanismen zur Optimierung der Ladeleistung der Anlage:

• Minifikation: Sie können den Asset -Manager so konfigurieren, dass Sie Ihre CSS- und JavaScript -Dateien während des Erstellungsprozesses automatisch minifieren, deren Dateigröße reduzieren und die Ladezeiten verbessern. Dies kann durch Erweiterungen oder benutzerdefinierte Konfiguration erfolgen.
• Kombinieren: Vermögenswerte in einem Bundle können zu weniger Dateien kombiniert werden, wodurch die Anzahl der HTTP -Anforderungen reduziert werden, die zum Laden aller Vermögenswerte erforderlich sind. Dies verbessert die Seitenlastgeschwindigkeit erheblich.
• Caching: Der Asset Manager nutzt das Caching, um eine redundante Verarbeitung zu vermeiden und die Leistung zu verbessern. Assets werden auf dem Server und der Client-Seite zwischengespeichert, wodurch die Last auf dem Server reduziert und nachfolgende Anforderungen beschleunigt werden.
• Komprimierung: Die GZIP -Komprimierung kann auf Serverebene aktiviert werden, um die Größe der über das Netzwerk übertragenen Vermögenswerte weiter zu verringern.
• Asynchrones Laden: Sie können Assets asynchron laden, um zu verhindern, dass das Rendering des Seiteninhalts blockiert und die wahrgenommene Leistung für Benutzer verbessert wird. Dies kann erreicht werden, indem Ihre <script></script> -Tags sorgfältig platziert oder erweiterte Techniken wie die Codeaufteilung verwendet werden.

Umgang mit Vermögenswerten aus verschiedenen Bündeln oder Standorten

Der Asset -Manager von YII unterstützt leicht die Verwaltung von Vermögenswerten aus verschiedenen Bündeln und Standorten. Sie können mehrere Asset -Bündel in Ihrer Ansicht registrieren, und jedes Bundle kann einen eigenen Quellpfad und Abhängigkeiten haben. Dies ermöglicht einen modularen Ansatz zur Verwaltung von Vermögenswerten.

Für Vermögenswerte in verschiedenen Verzeichnissen oder sogar externen Quellen (z. B. ein CDN) passen Sie einfach die basePath und baseUrl -Eigenschaften Ihrer Vermögensbündel entsprechend ein. Mit der depends Eigenschaft können Sie einen Abhängigkeitsbaum erstellen, um sicherzustellen, dass die Vermögenswerte in der richtigen Reihenfolge enthalten sind und Konflikte verhindern. Sie können auch $this->registerCssFile() und $this->registerJsFile() für einzelne Dateien verwenden, die nicht zu einem Bundle gehören.

Durch die Nutzung dieser Funktionen können Sie das Laden von CSS- und JavaScript-Dateien in Ihren YII-Anwendungen effektiv verwalten und optimieren, was zu einer effizienteren und benutzerfreundlicheren Erfahrung führt.

Das obige ist der detaillierte Inhalt vonWie kann ich den Asset -Manager von YII verwenden, um CSS und JavaScript -Dateien zu verwalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!