Magento 2 Advanced Js Bundling

9

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?

magento2 javascript requirejs jsbundling Nagaraju K.
quelle
wo m2 zu platzieren. Devtools?
Hafsa Zulfiqar
Auch wenn der Produktionsmodus aktiviert ist, verschwindet der Bundles-Ordner
Hafsa Zulfiqar

Antworten:

16

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

Geben Sie hier die Bildbeschreibung ein Geben Sie hier die Bildbeschreibung ein

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

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

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

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

Geben Sie hier die Bildbeschreibung ein

Nagaraju K.
quelle
Hallo @Nagaraju Kasa, ist es möglich, es auf Magento 2.2.x zu implementieren? Vielen Dank! Pablo
Pablo Garcia
ja könnte möglich sein, ich arbeite daran, das gleiche Konzept auf eine meiner Projektversionen 2.2.2 EE
Nagaraju K
1
Vielen Dank für Ihre schnelle Antwort @Nagaraju Kasa. Ich muss es auf Magento 2.2.2CE implementieren.
Pablo Garcia
@pablo Garcia Bitte zögern Sie nicht zu fragen, ob Sie Fragen zur erweiterten js-Bündelung haben. Bitte lassen Sie mich wissen, sobald Sie dieses Konzept auf Ihr Projekt (oder) Standard-Magento angewendet haben. danke
Nagaraju K
Sicher! Ich werde Sie darüber auf dem Laufenden halten! Danke @Nagaraju Kasa. Lassen Sie mich auch wissen, ob Sie es auf 2.2.2EE implementieren konnten.
Pablo Garcia
-6

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

Divya
quelle