Advanced

Update optimization

As you can see in the order of operations section, after any change in the watch mode (with lume --serve or lume --watch), the entire site is built again. This happens because it's almost impossible to know in advance which pages will be affected by a change in any file. For example:

Lume is conservative about the updating process, to make sure that any change in any file will be correctly applied to all pages. This is why the entire site is rebuilt after any change.

In large sites, or sites with expensive processors (like bundlers) this can increase the duration of the update process. There's a way to customize this behavior using a feature named Scoped Updates. It's a way to define different "scopes" (collections of independent files whose changes won't affect to other pages).

For example, let's say that you're building a website that has some javascript and css files, and these files are totally independent, meaning that:

In this case you create two scopes, one for CSS files and other for JS/TS files. To do that, just add this code to your _config.js file:

site.scopedUpdates(
  (path) => path.endsWith(".css"), //Select all *.css files
  (path) => path.test(/\.(js|ts)$/), //Select all *.js and *.ts files
);

Every function passed to this function will create a new scope. Now, if a .css file changes, only the .css files are rebuilt, but not any other file. If a .js or .ts file is updated, only these files are built. And if any other file changes, all files are rebuilt except .css, .ts and .js files.