Fix large cache folder size caused by dynamic inline JavaScript

If the cache/min folder is too big due to an unusually large number of JavaScript files it could cause problems:

• Takes up too much disk quota in your hosting account
• Too many files means that sometimes old ones will not be completely removed

When the number of JavaScript files is too large, it’s typically related to dynamic inline JavaScript on your site. When the Combine JavaScript files option is activated, inline JavaScript scripts are also optimized by including them in the combined JavaScript file.

What is “dynamic inline JavaScript”?

In this context, “dynamic” means content that varies from page to page. Dynamic inline JavaScript means that the same script is on many pages of your site, but one small part changes from page to page.  This will cause a new combined JavaScript file to be made for each page. On a site with a lot of pages, this will quickly create too many JavaScript files.

Here’s an example of part of an inline script:

ga('ec:addProduct', {
       'id': '3DH048',
       'name': '3D Uruguay Hat',
       'category': 'Countries/South America/Uruguay/All Products/Hats/3D Hats/World Cup/Uruguay',
       'price': '7.99',
   });

This same script will be on every product page of your site, but the details, such as the product ID, name, category and price will be different for every product, requiring a new JavaScript file for every product on your site. 

It only takes one character in the script to be different per page, to trigger the problem.

The solution is to exclude such scripts from being added to the combined JavaScript file.

How to find the Inline JavaScript to exclude

To identify which scripts are dynamic, we have to compare 2 of the combined JavaScript files created by WP Rocket, and find the differences. This will lead us to the scripts to exclude.

1. Activate WP Rocket with the Combine JavaScript filesoption enabled.
2. Open two pages of the same content type on the website, e.g. two blog posts, or two products.
3. Go to View > Page Source and locate the combined JavaScript file created by WP Rocket. It will be toward the bottom of the page source, and the URL will have this format: /cache/min/1/734613487895454.js Here’s an example:
TIP: Do a “Find” (Mac: Command + F, PC: CTRL+F) for cache/min , or .js to narrow down the search
4. Check if the combined .js files are different by looking at the filenames.  If the filenames are different, we know there is an issue.
5. Next we’re going to compare these 2 files to find the difference. Since the code is minified, it’s hard to read, so first we’ll unminify the code. You can do that at: unminify.com
   • Click on the JavaScript file from the page source
   • Select all of the JavaScript (Mac: Command +A, PC: CTRL+A),  then copy the contents
   • Paste the contents into unminify.com, then click Unminify.
6. Open a new browser tab and go to DiffChecker.com. Paste the unminified contents in the Original Text field on the left side.
7. Repeat Step 5 for the second page you opened in Step 2. Then take the unminified contents and paste it in the Changed text field on the right side in Diffchecker:
   

   

8. Click Find Difference. Wait a minute or so for the diff to process. You will then see a side-by-side comparison of the code with changes highlighted. Click on the red/green bars on the right to jump directly to the parts of the code which are different. The specific changes will be highlighted in a darker shade of red/green. Now you should be able to see the specific parts of the code that are different: 
   

   

   In this example there is a long string of numbers/letters which is different on each page. It’s likely unique on every page, and that’s the issue.

9. Next, we have to choose a string that will exclude the script in WP Rocket . This should be something unique to this script that will be present in each case. In this example a good candidate to identify this script would be: ct_input_name
10. Enter that into the WP Rocket option: Excluded Inline JavaScript
    

After making your exclusions, monitor the cache folder to check that the issue has been resolved. If the issue continues, you should repeat the process, but compare a different type of content on your site. For example, if you compared blog posts first, then try comparing products. There could be different JavaScript included on different content types.

If there were already too many JavaScript files in the  min folder for your server to delete automatically, you may have to manually remove those via FTP. Once the correct exclusions have been made, the files will be deleted as normal, automatically.