How to auto rename JS files to prevent browser cache issues

Question

Im creating a block plugin in worpress and each time I update my JS files, changes do not reflect to frontend because there's a browser cache.

I found some strategies in others frameworks that rename all JS files to a random name every time is compiled by webpack or similar.

Is there a way to achieve same result using WP build script and wp_enqueue_script function?

Answer 1

The function wp_enqueue_script takes a parameter $ver that you can use to automatically add an version parameter to the URL. To always load the newest version of your Javascript-File, you can use the php filemtime-function to give the timestamp of the modification date.

In a Plugin, use like this:

wp_register_script( 'my-awesome-script', plugin_dir_url( __FILE__ ). 'assets/my-awesome-script.js', array(), filemtime( plugin_dir_path( __FILE__ ). 'assets/my-awesome-script.js' ), true );

Happy Coding!

Answer 2

Keep constant in main file, and keep changing it when releasing new version, here's the code you can use.

define( MY_PLUGIN_VERSION, '1.0.0' );

function load_plugin_scripts() {

    wp_enqueue_script( 'handler', plugin_dir_url( __FILE__ ) . '/js/example.js', array(), MY_PLUGIN_VERSION, true );

}

add_action( 'wp_enqueue_scripts', 'load_plugin_scripts' );