How cachebuster works

What is cachebusting? Simply said, its a dynamic GET parameter added to your .js or .css file so the browser is forced to refetch the resource when there is a known change.

The Assets class provides a few scenarios of cachebusting when enqueueing scripts and styles.

NPM Dependency

1. Adding a dependency to package.json (using yarn add)

2. Copy to plugins/your-plugin/src/public/lib/ (using yarn grunt libs:copy)

3. Use Assets#enqueueLibraryScript() to enqueue the handle

The cachebuster is applied with the package version of the dependency.

Add external library

Entrypoints

1. Start developing on your entrypoints with yarn docker:start``

2. Change some code and webpack will transform the entrypoints automatically to production / development code

3. Use Assets#enqueueScript() to enqueue the handle

The cachebuster is applied with a hash (hash comes from webpack).

Using entrypoints

Unknown resources

You want to use a JavaScript library which is not installable through yarn

1. Put the files manually to plugins/your-plugin/src/public/lib``

2. Use Assets#enqueLibraryScript() (or wp_enqueue_script directly) to enqueue the handle

The cachebuster is applied with your plugins' version.