Magento 2 Java Script Bundling

JavaScript Bundling

Java-Script bundling is an optimization technique, you can use to reduce the number of files server requests for JavaScript requests. Bundling accomplishes this by merging files multiple JavaScript files together into one file to reduce the number of page requests.

Enable Java-Script bundling

JavaScript bundling does not work unless Magento is in production mode. Once in production mode, JavaScript bundling can only be enabled using the CLI. Follow these steps to setup JavaScript bundling from the CLI.

1. From the Magento root directory, switch to production mode:

   bin/magento deploy:mode:set production
   

2. Enable JavaScript bundling:

   bin/magento config:set dev/js/enable_js_bundling 1
   

3. Optimize bundling by minifying JavaScript files:

   bin/magento config:set dev/js/minify_files 1
   

4. Enable cache busting on static file URLs. This ensures users get the latest version of the assets anytime they update:

   bin/magento config:set dev/static/sign 1
   

5. To configure JavaScript bundling, you must disable Javascript file merging. Bundling will not work as the merging of files excludes bundling:

   bin/magento config:set dev/js/merge_files 0
   

6. Modifying the settings above when Magento is in production mode will require static view files deployment:

   bin/magento setup:static-content:deploy
   

7. Finally, clear the cache:

   bin/magento cache:clean config
   

   For example, when Sign Static Files is disabled (which is the default: config:set dev/static/sign 0), the URL to a static file might look like this: /static/frontend/Magento/luma/en_US/mage/dataPost.js. But when you enable the setting (config:set dev/static/sign 1), the same URL might look something like this: static/version40s2f9ef/frontend/Magento/luma/en_US/mage/dataPost.js, with a version number added as shown. The next time this file is updated (with bin/magento setup:static-content:deploy), a new version will be generated, causing the browser to download a new file from the server, thus busting the browser’s cache.

How bundling works in Magento

When you enable bundling, Magento combines hundreds of JavaScript files into just a few JavaScript bundles and downloads those bundles for each page. Because the browser downloads the bundles synchronously, page rendering is blocked until all bundles finish downloading. But the time saved from reducing server requests from hundreds to just a few, usually offsets the cost of downloading the bundles synchronously.

Excluding files

The <exclude> node in the etc/view.xml file for a theme specifies the files to exclude from the Magento JavaScript bundling process. JavaScript files excluded from bundling are loaded asynchronously by RequireJS as needed.

As such, you should exclude the JavaScript files you use for testing or development so that they are not loaded on every page.

The following code snippet from Magento’s Luma theme shows the types of files you should exclude from the bundling process.

Show example

Setting bundle file size

The bundle_size variable controls the file size of the generated bundles. Specifying a large bundle_size reduces the number of bundles generated, but generates larger file sizes. Specifying a smaller bundle_size generates more bundles with a smaller file sizes.

Example:

1
2
3
<vars module="Js_Bundle">
    <var name="bundle_size">1MB</var>
</vars>

The goal is to balance the number of bundles to download with the size of each bundle. As a rule of thumb, each bundle should be at least 100 kB.

Fine tuning your theme

There are many ways to tune your theme using the etc/view.xml file.

For example, the Magento Luma theme is configured to work well for all pages, but you can maximize browser performance for home, catalog, or product pages by adding items to or removing items from the <exclude> node.

Follow these steps to help you identify which JavaScript files to bundle for your theme:

1. Create a blank page with the layouts you would like to tune.
2. Compare the JavaScript files loaded in the pages with the JavaScript files in Magento.
3. Use the results of that comparison to build your exclude list.

 

Magento 2 Error ERR_TOO_MANY_REDIRECTS

 'm new to Magento, after installation of Magento 2 community edition.I am not able to access the admin panel. I am getting below error.

This web page has a redirect loop

Error ERR_TOO_MANY_REDIRECTS

Please help me to resolve the issue. Advance thanks to all.

Solution

php bin/magento config:set web/unsecure/base_url http://example.local/ 
php bin/magento config:set web/secure/base_url https://example.local/ 
php bin/magento config:set web/secure/use_in_adminhtml 1

php bin/magento cache:flush

Magento 2 giving error in plugin beforegetName

I am getting error while using plugin before have any one idea why it is happening? 

Fatal error: Uncaught ArgumentCountError: Too few arguments to function Puneet\Test\Model\Plugin\Name::beforegetName(), 1 passed in /var/www/html/m2/vendor/magento/framework/Interception/Interceptor.php on line 121 and exactly 2 expected in /var/www/html/m2/app/code/Puneet/Test/Model/Plugin/Name.php:15 Stack trace: #0 /var/www/html/m2/vendor/magento/framework/Interception/Interceptor.php(121): Puneet\Test\Model\Plugin\Name->beforegetName(Object(Magento\Catalog\Model\Product\Interceptor)) #1 /var/www/html/m2/vendor/magento/framework/Interception/Interceptor.php(153): Magento\Catalog\Model\Product\Interceptor->Magento\Framework\Interception\{closure}() #2 /var/www/html/m2/generated/code/Magento/Catalog/Model/Product/Interceptor.php(26): Magento\Catalog\Model\Product\Interceptor->___callPlugins('getName', Array, Array) #3 /var/www/html/m2/vendor/magento/module-catalog/Helper/Product/View.php(119): Magento\Catalog\Model\Product\Interceptor->getName() #4 /var/www/html/m2/vendor/magento/module-catalog/Helper/Product/View.php(28 in /var/www/html/m2/app/code/Puneet/Test/Model/Plugin/Name.php on line 15

My class and before method is.

<?php

/*

* Puneet_Test

* Name change

*/

namespace Puneet\Test\Model\Plugin;

class Name {

// public function aftergetName(\Magento\Catalog\Model\Product $subject, $result){

// return "SS: " . $result;

// }

public function beforegetName(\Magento\Catalog\Model\Product $subject, $name){

return   $result . "SS";

}

}

What is Factory class in Magento 2

 

Click here for real example video

What is Factory class in Magento 2

Overview

Factory classes are service class that instantiate non-injectable classes, that is, models that represent a database entity. They create a layer of abstraction between the ObjectManager and business code.

Relationship to ObjectManager

The Magento\Framework\ObjectManager is the class responsible for instantiating objects in the Magento application. Magento prohibits depending on and directly using the ObjectManager in your code.

Factories are an exception to this rule because they require the ObjectManager to instantiate specific models.

The following example illustrates the relationship between a simple factory and the ObjectManager:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

namespace Magento\Framework\App\Config;   class BaseFactory {   /**    * @var \Magento\Framework\ObjectManagerInterface    */   protected $_objectManager;     /**    * @param \Magento\Framework\ObjectManagerInterface $objectManager    */   public function __construct(\Magento\Framework\ObjectManagerInterface $objectManager)   {     $this->_objectManager = $objectManager;   }     /**    * Create config model    * @param string|\Magento\Framework\Simplexml\Element $sourceData    * @return \Magento\Framework\App\Config\Base    */   public function create($sourceData = null)   {     return $this->_objectManager->create(\Magento\Framework\App\Config\Base::class, ['sourceData' => $sourceData]);   } }

Writing factories

Unless you require specific behavior for your factory classes, you do not need to explicitly define them because they are an automatically generated class type. When you reference a factory in a class constructor, Magento’s object manager generates the factory class if it does not exist.

Factories follow the naming convention <class-type>Factory where <class-type> is the name of the class the factory instantiates.

For example the automatically generated Magento\Cms\Model\BlockFactory class is a factory that instantiates the class Magento\Cms\Model\Block.

Using factories

You can get the singleton instance of a factory for a specific model using dependency injection.

The following example shows a class getting the BlockFactory instance through the constructor:

1 2 3

function __construct ( \Magento\Cms\Model\BlockFactory $blockFactory) {     $this->blockFactory = $blockFactory; }

Calling the create() method on a factory gives you an instance of its specific class:

1	$block = $this->blockFactory->create();

For classes that require parameters, the automatically generated create() function accepts an array of parameters that it passes on to the ObjectManager to create the target class.

The example below shows the construction of a \Magento\Framework\FlagFactory object by passing in an array of parameters to a factory:

1 2	$flag = $this->flagFactory->create([   'data' =>  ['flag_code' => 'something']

The Flag class has a $data constructor parameter which corresponds to the data key in the create array above.

Interfaces

Factories are smart enough to resolve dependencies and allow you to get the correct instance of an interface as defined in your module’s di.xml.

For example, in the CatalogInventory module, the di.xml file contains the following entry:

1	<preference for="Magento\CatalogInventory\Api\Data\StockItemInterface" type="Magento\CatalogInventory\Model\Stock\Item" />

It instructs Magento to use the specific Item class wherever the StockItemInterface is used. When a class in that module includes the factory StockItemInterfaceFactory as a dependency, Magento generates a factory that is capable of creating the specific Item objects.