In one of my articles I showed you how to create a simple JS template engine. In this article I will show you how to add simple caching to the compilation of our templates.
Caching with our template engine is pretty simple. We just keep a key value object and use template strings as keys and functions as values. This will make subsequent uses of a template faster.
All our compile function is this:
const compile = (template) => {
return new Function("data", "return " + compileToString(template))
}
Let's rename this to
compileToFunction
.const compileToFunction = (template) => {
return new Function("data", "return " + compileToString(template))
}
Now let's create a cache. We will use a
Map
for this.const cache = new Map();
Now let's add a
compile
function which uses this cache
.All we need to do is check if the
cache.has(template)
. If not, we need to create it and set it. If it does have it, we just need to return it.const compile = (template) => {
if (cache.has(template)) {
return cache.get(template);
} else {
const compiledFunction = compileToFunction(template);
cache.set(template, compiledFunction);
return compiledFunction;
}
}
Currently our
render
function just uses some Regex to replace all the values.var render = (template, data) => {
return template.replace(/{{(.*?)}}/g, (match) => {
return data[match.split(/{{|}}/).filter(Boolean)[0]]
})
}
I think we should change it to use
compile
under the hood for faster automatic caching. It is pretty simple to implement, we just need to run compile
and then run that function with data
.const render = (template, data) => {
return compile(template)(data);
}
In this tutorial I showed how to extend the template engine we made in a previous post with caching for faster compilation and rendering.
Also published here.