title: What is a good solution for efficiently loading a large number of Handlebar templates?
body: <p>I have a scenario where I would like to load approximately 50 different Mustache/Handlebar templates to one page. The way I've typically gone about loading them is as follows:</p>
  
  <pre><code>function App(){
  
      this.templates = {
           template_one : {
                 url : "path/to/template",
                 template : ""
            },
            template_two : {
                 url : "path/to/template",
                 template : ""
            }
       }
  }
  
  App.prototype.getTemplates = function(){
  
        const keys = Object.keys(this.templates);
  
        return new Promise((resolve, reject) =&gt; {
             //Loop through each template and request it asynchronously
             keys.forEach((key, i) =&gt; {
                 $.get(this.templates[key]['url'], template =&gt; {
                      this.templates[key]['template'] = template;
                 }, "html").done(() =&gt; {
                      //When the last template has been retrieved, resolve the promise
                      if(i === keys.length - 1){
                           resolve();
                      }
                 });
             });                
        });
  }
  </code></pre>
  
  <p>This approach works just fine, however, conducting 50 separate async requests each time my page loads seems like a horrendous waste of network resources and is likely to be quite slow.</p>
  
  <p>Is there a way to my front-end partials more efficiently?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>As pointed out in the comments, a server-side solution is likely the correct way of accomplishing this. I'm currently using a php back-end, but am open to any process using gulp/grunt/node/etc. </p>
  
  <p>I am still unsure of the process since the documentation for handlebars mentions loading individual files inside of <code>&lt;script&gt;&lt;/script&gt;</code> tags and referencing them via the script tag's id.</p>
  
  <p>How would one go about a server-side build step for Handlebars/Mustache?</p>