In one of my articles I showed you how to . In this article I will show you how to add simple caching to the compilation of our templates. create a simple JS template engine How Caching Works with JS Template Engines 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. Implementing it inside Compile All our compile function is this: compile = { ( , + compileToString(template))
} const ( ) => template return new Function "data" "return " Let's rename this to . compileToFunction compileToFunction = { ( , + compileToString(template))
} const ( ) => template return new Function "data" "return " Now let's create a cache. We will use a for this. Map cache = (); const new Map Now let's add a function which uses this . compile cache All we need to do is check if the . If not, we need to create it and set it. If it does have it, we just need to return it. cache.has(template) compile = { (cache.has(template)) { cache.get(template);
    } { compiledFunction = compileToFunction(template);
        cache.set(template, compiledFunction); compiledFunction;
    }
} const ( ) => template if return else const return Changing Our Render Function Currently our function just uses some Regex to replace all the values. render render = { template.replace( , (match) => { data[match.split( ).filter( )[ ]]
    })
} var ( ) => template, data return /{{(.*?)}}/g return /{{|}}/ Boolean 0 I think we should change it to use under the hood for faster automatic caching. It is pretty simple to implement, we just need to run and then run that function with . compile compile data render = { compile(template)(data);
} const ( ) => template, data return Conclusion In this tutorial I showed how to extend the template engine we made in a previous post with caching for faster compilation and rendering. Other Articles You Might Like Creating a JS Template Engine 14 JS Template Engines Also published here .

Keep

Check out my tutorial on creating a JS template engine!

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

How to Add Auto Caching to Your JS Template Engine

Too Long; Didn't Read

Company Mentioned

shadowtime2000

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How to Add Auto Caching to Your JS Template Engine

Too Long; Didn't Read

Company Mentioned

shadowtime2000

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES