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

21 Javascript Bundlers 🚀

Everything You Don't Know About ES Modules

Check out my tutorial on creating a JS template engine!

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

How to Add Auto Caching to Your JS Template Engine

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

How Cache Busting Works

42 Stories To Learn About Expressjs

6 Reasons Why You Should Not Connect Express.js And AWS Lambda

A Beginner’s Guide to NPM Packages

A Practical Guide to Implementing User Authentication using JavaScript and Express

How Cache Busting Works

42 Stories To Learn About Expressjs

6 Reasons Why You Should Not Connect Express.js And AWS Lambda

A Beginner’s Guide to NPM Packages

A Practical Guide to Implementing User Authentication using JavaScript and Express

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps