How to exclude specific js files from minify?

In this post, I will be guiding you to excluding JavaScript files from minifying. Sometimes it is required to load third-party JavaScript files in our custom module/theme & .min file is not available.

Use Case

You are implementing a custom payment method module for the current project:
- Here you found the payment gateway is providing minified javascript file(s) but file(s) name doesn’t have .min suffix like payment-abc.min.js
At this point, you have a tight budget and ETA. You can’t just tell the client or payment gateway refused your request.

How minify js files work in Magento 2?

At first, you have to enable minify JavaScript JS from Admin or using the command line in production mode.

Copy Code

\> php bin/magento config:set dev/js/minify_files 1

Disable JS merge if enable:
\> php bin/magento config:set dev/js/merge_files 0
\> php bin/magento cache:flush

Then run deploy command:

Copy Code

\> php bin/magento setup:static-content:deploy

Now open the Magento 2 website on the browser and open DevTools, in Network panel it will show the minify js loader file: requirejs-min-resolver.min.js. This file is responsible to open all js files in .min and contains RegEx rules to exclude js files from adding .min suffix. Magento creates this file when JS minify & production mode is enabled.

Let’s do it

Using the above test case:

You are implementing a custom payment method module for the current project but JavaScript files of the payment gateway do not have .min suffix and you will tell Magento 2 to add file path in the requirejs-min-resolver.min.js file.
We will add an after plugin on the getExcludes method of Magento\Framework\View\Asset\Minification class. So you got an idea this class is responsible for minifying files in Magento 2.

In your di.xml file at app/code/Vendor/Payment/etc directory:

Copy Code

<type name="Magento\Framework\View\Asset\Minification">
    <plugin name="vendor_prevent_minification" type="Vendor\PaymentModule\Plugin\View\MinificationPlugin" />
</type>

Then create a plugin file: MinificationPlugin.php at app/code/Vendor/Payment/Plugin/View directory:

Copy Code

<?php

namespace Vendor\PaymentModule\Plugin\View;

use \Magento\Framework\View\Asset\Minification;

class MinificationPlugin
{
    /**
     * Exclude static componentry files from being minified.
     *
     * Using the config node `minify_exclude` is not an option because it does
     * not get merged but overridden by subsequent modules.
     *
     * @see \Magento\Framework\View\Asset\Minification::XML_PATH_MINIFICATION_EXCLUDES
     *
     * @param Minification $subject
     * @param string[] $excludes
     * @param string $contentType
     * @return string[]
     */
    public function afterGetExcludes(Minification $subject, array $excludes, $contentType)
    {
         // Here we are checking if not “js” then skip it
         if ($contentType !== 'js') {
            return $excludes; // Skip if contentType is not “js”
         }


         // Array variable adds path to exclude minify
         $excludes[]= 'https://webservices.paymentgateway.net/';
         return $excludes;
     }
}

Now change the Vendor/PaymentModule name as per your module and then run below commands:

Copy Code

\> php bin/magento cache:flush
\> php bin/magento setup:di:compile
\> php bin/magento setup:static-content:deploy

In browser, now check the payment js will open properly because file path is added in requirejs-min-resolver.min.js file.

Conclusion

Excluding JS files from minifying is an out-of-box feature of Magento 2 and it is very helpful when working with third-party services like Google ReCaptcha, Payment methods, shipping methods, email marketing, etc.

Let me know if you found the article helpful so that it will encourage me to write new blogs.

Thank you.