how-cachebuster-works.md

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

{% hint style="success" %} The cachebuster is applied with the package version of the dependency. {% endhint %}

{% page-ref page="../typescript-development/add-external-library.md" %}

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

{% hint style="success" %} The cachebuster is applied with a hash (hash comes from webpack). {% endhint %}

{% page-ref page="../typescript-development/using-entrypoints.md" %}

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

{% hint style="success" %} The cachebuster is applied with your plugins' version. {% endhint %}