How can I use PHP inside a wordpress site to find a hashed bundle.js file and insert the appropriate file name into the script tag?

Question

So, I've never written php until today, and I'm trying to implement a cache breaking system on a wordpress site that has some React components living inside it. So inside of the footer-home.php file I have this:

      </div> <?php // close #app ?>
    </main>
  <div class="container footer">

    <div class="row">
      <div class="col-sm-12">
        <div id="instagram"></div>
      </div>
    </div>

    <?php get_footer('shared') ?>
  </div>

  </div><?php //close container ?>

<?php
function grab_hashed_bundle_script() {
  $path = '/client/';
  $fileName = null;
  $dirJS = new DirectoryIterator($path);

  foreach ($dirJS as $file) {
    if (pathinfo($file, PATHINFO_EXTENSION) === 'js') {
      $fileName = basename($file);
      break;
    }
  }
  return $fileName;
}

$bundle_js = grab_hashed_bundle_script();
?>  
  <script src="/client/<?php echo $bundle_js ?>"></script>
  <?php wp_footer(); ?>
</body>
</html>

I know this is ugly AF and hacky, so if anyone can point out a better way to do this, I'm all ears.

The reason I need to do this is I'm having webpack add a random 6-digit hash to the bundle.js filename(as in bundle-123456.js) every time we run a new build. Previously, we just had a regular script tag in this footer file like so: <script src=/client/bundle.js"></script> but clients' browsers would end up caching bundle.js even after we had updated it requiring customers to have to empty their cache in order to get the new .js files.

Any help is greatly appreciated.

Also, I'm not trying to cache bust with a param as suggested in the comment. I'm trying to bust based on the random hash that I'm having webpack insert into the name of the bundle.js file upon building.

Possible duplicate of [Cache busting via params](https://stackoverflow.com/questions/9692665/cache-busting-via-params) — James McDonnell, Jul 14 '17 at 22:39
Not at all what I'm trying to do. I'm trying to handle this within the wordpress template, not on the server filesystem — Jeremy Gunter, Jul 14 '17 at 22:43
There is no way you can create the same random 6-digit on client side. You have to change the JS file on server. There are a couple techniques such as [ETAG, expire or age](https://stackoverflow.com/questions/499966/etag-vs-header-expires). Otherwise, you can use @James's answer to avoid caching. Anyway, you must stop adding random number in the file name. It won't help at all. — Buaban, Jul 15 '17 at 04:02
@Buaban see my answer below. It definitely is possible, and hashing the files does help. I use webpack to add a hash to file name and then fetch it and insert it using Wordpress' wp_enqueue_script/style. — Jeremy Gunter, Jul 19 '17 at 19:50
@JeremyGunter Thanks. I see. I misunderstood your question, I thought you wanted to do it on client-side. — Buaban, Jul 20 '17 at 03:22
@Buaban my mistake for not making clearer. I just wanted to draw your attention to it in case you ever needed to implement something similar. :) — Jeremy Gunter, Jul 20 '17 at 19:19

score 1 · Accepted Answer · answered Jul 19 '17 at 19:46

This is the solution one of my co-workers came up with:

Inside of functions.php:

/**
 * Grab Hashed Bundle Files
 */

function enqueue_hashed_bundle_files() {
  // soooo gross. would love to know of a cleaner way.
  $build_dir = get_theme_root() . '/../../../client/build/';
  $all_files = scandir($build_dir);

  $css_files = array();
  $js_files = array();

  foreach( $all_files as $file ){
    $pathinfo = pathinfo($file);
    switch( $pathinfo['extension'] ){
      case 'js':
        array_push($js_files, $file);
        break;
      case 'css':
        array_push($css_files, $file);
        break;
      default:
        break;
    }
  }

  // now that we have the filenames, we can access them directly with the
  // absolute url

  $base_url = get_option('siteurl') . '/client/';

  wp_enqueue_script( 'bundlejs', $base_url . $js_files[0], array(), null, true );
  wp_enqueue_style( 'bundlecss', $base_url . $css_files[0], array(), null );
}

score 0 · Answer 2 · answered Jul 14 '17 at 22:38

0

Change your request for the js file to have a query param instead of a random string in the filename.

See this post. The browser shouldn't cache it with a query string.

answered Jul 14 '17 at 22:38

James McDonnell

3,600
1
20
26

1

we usually just append a timestamp – James McDonnell Jul 14 '17 at 22:38
1

if you're suggested solution is cache-busting just say so and provide some code example, providing link only answers will most likely get the attention of moderators – svarog Jul 15 '17 at 10:29

How can I use PHP inside a wordpress site to find a hashed bundle.js file and insert the appropriate file name into the script tag?

2 Answers2