How to disable JavaScript bundling for particular page in Magento 2

JavaScript bundling is an optimization technique you can use to reduce the number of server requests for JavaScript files. It is achieved by merging multiple JavaScript files together into one file to reduce the number of page requests. By default, Magento 2 allows excluding the particular JavaScript files from bundling by specifying the corresponding file in exclude node of the etc/view.xml file for a theme. However, sometimes it’s not enough.

Let’s imagine we need to disable the JavaScript bundling for the particular page due to the specifics of its implementation. Or, for example, this is just a temporary solution in case you don’t want to disable the JavaScript bundling for the whole website while investigating and trying to fix some issue appeared on some page after enabling the JavaScript bundling. There is a simple and quick solution for such purpose. However, it requires a little bit of coding.

The default asset config class Magento\Framework\View\Asset\Config is used for retrieving the configs for JS bundling, JS and CSS merging, HTML minification. These configurations are being checked per page. By default, the configs are retrieved from the corresponding system configuration values. Nonetheless, you can provide your own implementation of assets config depending on your needs. The assets config must be implemented within the Magento\Framework\View\Asset\ConfigInterface interface.

However, we won’t dig so deep in our case. We just want to implement a simple solution for disabling the JS bundling for some page. Let it be the wishlist page. So we can use Magento 2 after plugin for the Magento\Framework\View\Asset\ConfigInterface::isBundlingJsFiles method, just to see how the asset config works. First of all, we need to define the plugin class for Magento\Framework\View\Asset\ConfigInterface:

<?xml version="1.0"?>
<!-- File: app/code/Atwix/BundlingExclusionExtended/etc/frontend/di.xml -->

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Framework\View\Asset\ConfigInterface">
        <plugin name="disable_bundling_for_page_sample"
                type="Atwix\BundlingExclusionExtended\Plugin\DisableBundlingForPageSamplePlugin" />
    </type>
</config>

The source code of the plugin class is the following:

<?php
/* File: app/code/Atwix/BundlingExclusionExtended/Plugin/DisableBundlingForPageSamplePlugin.php */

namespace Atwix\BundlingExclusionExtended\Plugin;

use Magento\Framework\App\Request\Http as HttpRequest;
use Magento\Framework\App\RequestInterface;
use Magento\Framework\View\Asset\Config as AssetConfig;

/**
 * Class AssetConfigPlugin
 */
class DisableBundlingForPageSamplePlugin
{
    /**
     * Sample Action Name
     */
    const ACTION_NAME = 'wishlist_index_index';

    /**
     * Request
     *
     * @var RequestInterface|HttpRequest
     */
    protected $request;

    /**
     * DisableCheckoutJsBundlingPlugin constructor
     *
     * @param RequestInterface $httpRequest
     */
    public function __construct(RequestInterface $httpRequest)
    {
        $this->request = $httpRequest;
    }

    /**
     * Plugin for isBundlingJsFiles method
     * Disable JS bundling for particular page
     *
     * @param AssetConfig $subject
     * @param boolean $result
     *
     * @return boolean
     */
    public function afterIsBundlingJsFiles(AssetConfig $subject, $result)
    {
        if ($this->request->getFullActionName() == self::ACTION_NAME) {

            return false;
        }

        return $result;
    }
}

In our Magento 2 plugin method, we compare the requested full controller action name to that of the page where we need to exclude JS bundling. If the values match, then we force the disabling of JS bundling for the current controller action by returning a negative boolean value (false).

In this manner, you can also influence other asset configurations by extending the following methods:

• Magento\Framework\View\Asset\ConfigInterface::isMergeCssFiles
• Magento\Framework\View\Asset\ConfigInterface::isMergeJsFiles
• Magento\Framework\View\Asset\ConfigInterface::isMinifyHtml

Note that you should exercise caution while managing JavaScript bundling or similar configurations. Incorrect usage of such settings may result in additional server load. Therefore, it is advisable to proceed only if you clearly understand what you are doing and why.

The full module’s source code can be found in Atwix_BundlingExclusionExtended GIT repository.

I h hope you found this short tutorial helpful. Thanks for reading!