cache busting

[mvolkmann]

Is there a simple approach to add cache busting so when I deploy my Eleventy site to GitHub Pages, users just need to refresh to see changes? I'm looking for a way that does not require manually modifying every page link to include a query parameter. I tried https://github.com/mightyplow/eleventy-plugin-cache-buster, but couldn't get that to work.

[yuheiy]

I use webpack to manage the filenames. If you use Webpack Manifest Plugin, you can output the source and output file names as JSON files, so you can load them from Eleventy.

_data/general.js:

module.exports = async () => {
  // Wait for webpack-manifest.json to be generated.
  const manifest = await waitFor(() => require("../webpack-manifest.json"));

  return {
    assetPath(key) {
      assert(
        manifest.hasOwnProperty(key),
        `\`${key}\` does not exist in \`webpack-manifest.json\``
      );
      return manifest[key];
    },
  };
};

function waitFor(callback) {
  const interval = 100;

  return new Promise((resolve) => {
    const intervalId = setInterval(checkCallback, interval);
    checkCallback();

    function checkCallback() {
      try {
        resolve(callback());
        clearInterval(intervalId);
      } catch {}
    }
  });
}

index.njk:

<script src="{{ "main.js" | general.assetPath }}"></script>

Complete examples: https://github.com/yuheiy/_shifted/tree/main/boilerplate-static

While webpack-dependent approach may not be in keeping with Eleventy's philosophy, I do this because my workflow depends on webpack.

[renestalder]

The most pragmatic approach I use is the npm package version.

As you have out-of-the-box access to the package, you can add the version to the src urls like this:

<link href="/assets/css/main.css?v={{pkg.version}}" rel="stylesheet"/>

And then on release, run npm version e.g. npm version patch to raise your package version.

[mvolkmann]

Do you know how I can get the value of pkg.version inside my .eleventy.js file?

…

On Wed, Jan 6, 2021 at 3:34 AM René Stalder ***@***.***> wrote: The most pragmatic approach I use is the npm package version. As you have out-of-the-box access to the package, you can add the version to the src urls like this: <link href="/assets/css/main.css?v={{pkg.version}}" rel="stylesheet"/> And then on release, run npm version e.g. npm version patch to raise your package version. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#1471 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAATLUFTHBSLL7K4MIY2T4DSYQVD7ANCNFSM4S4V2QSA> .

-- R. Mark Volkmann Object Computing, Inc.

[renestalder]

That should work:

const pkg = require('./package.json');
console.log(pkg.version);

[Denperidge]

Hi, shameless self plug!
I made a plugin to handle the ?v= automatically using content hashes. So if that would interest you, feel free to try it out! https://www.npmjs.com/package/eleventy-auto-cache-buster

(For the maintainers, if this is too much of a self promotion, please feel free to let me know and/or remove the comment)

[notacouch]

Thank you! This works for me.