Magento 2 Advanced Js Bundling

Kann jemand an Advanced JS Bundling arbeiten ?

Dieses Konzept möchten wir auf eines unserer Kundenprojekte anwenden.

Könnten Sie bitte die erweiterte JavaScript-Bündelung Schritt für Schritt ausführlich erläutern und müssen zur Überprüfung Tools (oder) Module installiert werden? Ist es möglich, die erweiterte JS-Bündelung in Magento / 2.2 (Enterprise) zu implementieren? *

Hinweis : Ich habe M2developer Docs befolgt , konnte es jedoch nicht verstehen und implementieren. Könnten Sie mich bitte anleiten und möchten wissen, welche Herausforderungen zu bewältigen sind?

Gibt es einen Unterschied zwischen JS-Bündelung und erweiterter JS-Bündelung?

Ich habe F & E für diese Aufgabe durchgeführt und einige Implementierungshinweise vorbereitet, die anderen helfen könnten, wenn Sie dies möchten. Befolgen Sie bitte die folgenden Schritte

Erweiterte JS-Bündelung .

A) Erforderliche Werkzeuge

1. node.js> = 8.x.
2. npm> = 6.x.
3. Magento 2 DevTool
4. Git

B) DevTool-Installation

1. Klonen Sie das Repository auf Ihrem lokalen Computer. Beispiel: Git-Klon https://github.com/magento/m2-devtools.git
2. Führen Sie npm install aus
3. Führen Sie npm start (oder) npm run build aus
4. Navigieren Sie zu chrome: // extensions
5. Aktivieren Sie den Entwicklermodus
6. Klicken Sie auf Entpackt laden
7. Wählen Sie den Erweiterungsordner im Stammverzeichnis dieses Repositorys aus
8. Schließen Sie den Chrome-Browser und öffnen Sie ihn erneut

C) Verwendung von DevTool

1. Besuchen Sie eine beliebige Seite in der Storefront in einem Browser mit dieser installierten Erweiterung

2. Öffnen Sie RequireJS >> Bundle Generator

3. Klicken Sie auf die Schaltfläche Aufzeichnen

4. Beginnen Sie mit der Navigation zu kritischen Seiten Ihres Geschäfts (Startseite / Katalog / Produkt / Warenkorb / Kasse).

5. Klicken Sie erneut auf die Schaltfläche Aufzeichnen, wenn Sie fertig sind

6. Befolgen Sie die Installationsanweisungen in der Bundle Generator-Benutzeroberfläche

Unter dem folgenden Link finden Sie Informationen zur Verwendung von DevTool. Hier finden Sie ein Beispiel aus Standard-Magento 2.3.1

• https://drive.google.com/file/d/1ysIjzr8ix1d4Vzi3gnwX4prp6-7_1JmM/view

D) Anweisungen zur Einrichtung

1. Installieren Sie das Magento_BundleConfig-Modul: Dieses Modul kann derzeit nicht über den Composer verwendet werden. Installieren Sie das Magento_BundleConfig- Modul manuell von Github. Stellen Sie sicher, dass Sie setup: upgrade ausgeführt haben und das Modul aktiviert ist.

Siehe : https://github.com/magento/m2-devtools/tree/master/Magento_BundleConfig

2.Stellen Sie den Speicher auf den Produktionsmodus: PHP Bin / Magento Deploy: Modus: Stellen Sie die Produktion ein

3. Statische Inhaltsquelle sichern: Verschieben Sie für das zu bündelnde Thema jeden Sprachordner in einen gleichnamigen Ordner, an den _source angehängt ist .

Wenn Sie beispielsweise Luma auf Englisch bündeln, verschieben Sie Frontend / Magento / luma / en_US nach Frontend / Magento / luma / en_US_source.

Benennen Sie einfach en_US in en_US_source um

4. Installieren Sie das RequireJS-Optimierungsprogramm: Sie müssen node.js lokal / Server installiert haben . Führen Sie npm install -g requirejs aus

5. Speichern der generierten Bundle-Konfiguration: Klicken Sie auf der Registerkarte Bundle-Generator auf In Zwischenablage kopieren. Speichern Sie die gesamte Konfiguration in einer Datei namens build.js im Stammverzeichnis Ihres Geschäfts. (Sie haben gesehen, wie Sie build.js über den obigen Video-Referenzlink erhalten.)

r.js -o build.js baseUrl = "pub / static / frontend / Magento / luma / en_US_source /" dir = "pub / static / frontend / Magento / luma / en_US /"

Beispiel : r.js -o build.js baseUrl = "pub / static / frontend / Demo / Lernen / en_US_source /" dir = "pub / statisch / frontend / Demo / Lernen / en_US /"

Wenn die oben genannten Schritte korrekt ausgeführt wurden, sollte Ihr Geschäft jetzt mit optimierten JavaScript-Bundles ausgeführt werden.

https://prnt.sc/no7j3z

Wenn sich Ihr Magento-Store im Produktionsmodus befindet, dann

Magento ≥ 2.2 Dies kann über die Befehlszeile erfolgen

 php bin/magento config:set dev/js/enable_js_bundling 1
 php bin/magento cache:clean

Magento <2.2

UPDATE `core_config_data` SET `value`='1' WHERE `path`='dev/js/enable_js_bundling';

Führen Sie dann diesen Befehl aus: php bin / magento cache: clean