How to Exclude Custom Module JS from Minification of JS in Magento 2

JavaScript minification in Magento 2 deletes odd components like spaces or symbols from JS files to decrease the size of the code and to improve the website load time. To minify JavaScript from Magento 2 backend, go to Stores > Configuration > Advanced > Developer when the developer mode is on.

Note: If the store is in Production mode, the above option will not be visible.

When “Minify JavaScript Files” is turned on, Magento 2 adds .min to the script.

The core benefit of minifying Js is to reduce the number of characters in the code, and therefore the size of the resulting file. The smaller the file, the faster it’s downloaded and processed and thus, improves the page load time.

Now, when Javascript minification is on from the backend, it minifies the custom module as well as 3rd party Js files as well. Which adds .min file for the custom module files and as such file is not available in the 3rd party API server, it throws 404 error.

To exclude custom module JS from Minification of Js in Magento 2, use the below solution.

Steps to Exclude Custom Module Js from Minification of JS in Magento 2:

1. Create di.xml file at Vendor\Extension\etc directory
   
   <?xml version="1.0"?> <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\Minification">         <plugin name="my-exclude-Extension" type="Vendor\Extension\Plugin\ExcludeFilesFromMinification" />     </type> </config>

   1 2 3 4 5 6

   <?xml version="1.0"?> <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\Minification">         <plugin name="my-exclude-Extension" type="Vendor\Extension\Plugin\ExcludeFilesFromMinification" />     </type> </config>

    
2. Create file ExcludeFilesFromMinification.php at Vendor\Extension\Plugin directory
   
   <?php namespace Vendor\Extension\Plugin; use Magento\Framework\View\Asset\Minification; class ExcludeFilesFromMinification {     public function aroundGetExcludes(Minification $subject, callable $proceed, $contentType)     {         $result = $proceed($contentType);         if ($contentType != 'js') {             return $result;         }         $result[] = 'your file path'; // for e.g https://www.google.com/recaptcha/api.js'         return $result;     } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

   <?php   namespace Vendor\Extension\Plugin; use Magento\Framework\View\Asset\Minification;   class ExcludeFilesFromMinification {     public function aroundGetExcludes(Minification $subject, callable $proceed, $contentType)     {         $result = $proceed($contentType);         if ($contentType != 'js') {             return $result;         }         $result[] = 'your file path'; // for e.g https://www.google.com/recaptcha/api.js'         return $result;     } }

    

That’s all about excluding 3rd party js files from minification. After implementing the above code, your custom module js files will be excluded from the minification and you will no longer get 404 error for the js files. You can also have a look at Magento website audit checklist to make your website perform well in all possible ways.

For which custom module or 3rd party JavaScript files you implemented the above solution? Don’t forget to share your queries and suggestions in the comment section below. Share the article with your fellow Magento peeps if you liked the solution.