diff --git a/apps/files_versions/js/merged.json b/apps/files_versions/js/merged.json
index 1a7fbad298..67ee60b385 100644
--- a/apps/files_versions/js/merged.json
+++ b/apps/files_versions/js/merged.json
@@ -1,5 +1,6 @@
 [
   "versionmodel.js",
+  "templates.js",
   "versioncollection.js",
   "versionstabview.js",
   "filesplugin.js"
diff --git a/apps/files_versions/js/templates.js b/apps/files_versions/js/templates.js
new file mode 100644
index 0000000000..17293d763d
--- /dev/null
+++ b/apps/files_versions/js/templates.js
@@ -0,0 +1,54 @@
+(function() {
+  var template = Handlebars.template, templates = OCA.Versions.Templates = OCA.Versions.Templates || {};
+templates['item'] = template({"1":function(container,depth0,helpers,partials,data) {
+    var helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
+
+  return "				<div class=\"version-details\">\n					<span class=\"size has-tooltip\" title=\""
+    + alias4(((helper = (helper = helpers.altSize || (depth0 != null ? depth0.altSize : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"altSize","hash":{},"data":data}) : helper)))
+    + "\">"
+    + alias4(((helper = (helper = helpers.humanReadableSize || (depth0 != null ? depth0.humanReadableSize : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"humanReadableSize","hash":{},"data":data}) : helper)))
+    + "</span>\n				</div>\n";
+},"3":function(container,depth0,helpers,partials,data) {
+    var helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
+
+  return "			<a href=\"#\" class=\"revertVersion\" title=\""
+    + alias4(((helper = (helper = helpers.revertLabel || (depth0 != null ? depth0.revertLabel : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"revertLabel","hash":{},"data":data}) : helper)))
+    + "\"><img src=\""
+    + alias4(((helper = (helper = helpers.revertIconUrl || (depth0 != null ? depth0.revertIconUrl : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"revertIconUrl","hash":{},"data":data}) : helper)))
+    + "\" /></a>\n";
+},"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
+    var stack1, helper, options, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression, alias5=helpers.blockHelperMissing, buffer = 
+  "<li data-revision=\""
+    + alias4(((helper = (helper = helpers.timestamp || (depth0 != null ? depth0.timestamp : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"timestamp","hash":{},"data":data}) : helper)))
+    + "\">\n	<div>\n		<div class=\"preview-container\">\n			<img class=\"preview\" src=\""
+    + alias4(((helper = (helper = helpers.previewUrl || (depth0 != null ? depth0.previewUrl : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"previewUrl","hash":{},"data":data}) : helper)))
+    + "\" width=\"44\" height=\"44\"/>\n		</div>\n		<div class=\"version-container\">\n			<div>\n				<a href=\""
+    + alias4(((helper = (helper = helpers.downloadUrl || (depth0 != null ? depth0.downloadUrl : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"downloadUrl","hash":{},"data":data}) : helper)))
+    + "\" class=\"downloadVersion\"><img src=\""
+    + alias4(((helper = (helper = helpers.downloadIconUrl || (depth0 != null ? depth0.downloadIconUrl : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"downloadIconUrl","hash":{},"data":data}) : helper)))
+    + "\" />\n					<span class=\"versiondate has-tooltip live-relative-timestamp\" data-timestamp=\""
+    + alias4(((helper = (helper = helpers.millisecondsTimestamp || (depth0 != null ? depth0.millisecondsTimestamp : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"millisecondsTimestamp","hash":{},"data":data}) : helper)))
+    + "\" title=\""
+    + alias4(((helper = (helper = helpers.formattedTimestamp || (depth0 != null ? depth0.formattedTimestamp : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"formattedTimestamp","hash":{},"data":data}) : helper)))
+    + "\">"
+    + alias4(((helper = (helper = helpers.relativeTimestamp || (depth0 != null ? depth0.relativeTimestamp : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"relativeTimestamp","hash":{},"data":data}) : helper)))
+    + "</span>\n				</a>\n			</div>\n";
+  stack1 = ((helper = (helper = helpers.hasDetails || (depth0 != null ? depth0.hasDetails : depth0)) != null ? helper : alias2),(options={"name":"hasDetails","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data}),(typeof helper === alias3 ? helper.call(alias1,options) : helper));
+  if (!helpers.hasDetails) { stack1 = alias5.call(depth0,stack1,options)}
+  if (stack1 != null) { buffer += stack1; }
+  buffer += "		</div>\n";
+  stack1 = ((helper = (helper = helpers.canRevert || (depth0 != null ? depth0.canRevert : depth0)) != null ? helper : alias2),(options={"name":"canRevert","hash":{},"fn":container.program(3, data, 0),"inverse":container.noop,"data":data}),(typeof helper === alias3 ? helper.call(alias1,options) : helper));
+  if (!helpers.canRevert) { stack1 = alias5.call(depth0,stack1,options)}
+  if (stack1 != null) { buffer += stack1; }
+  return buffer + "	</div>\n</li>\n";
+},"useData":true});
+templates['template'] = template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
+    var helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
+
+  return "<ul class=\"versions\"></ul>\n<div class=\"clear-float\"></div>\n<div class=\"empty hidden\">\n	<div class=\"emptycontent\">\n		<div class=\"icon-history\"></div>\n		<p>"
+    + alias4(((helper = (helper = helpers.emptyResultLabel || (depth0 != null ? depth0.emptyResultLabel : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"emptyResultLabel","hash":{},"data":data}) : helper)))
+    + "</p>\n	</div>\n</div>\n<input type=\"button\" class=\"showMoreVersions hidden\" value=\""
+    + alias4(((helper = (helper = helpers.moreVersionsLabel || (depth0 != null ? depth0.moreVersionsLabel : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"moreVersionsLabel","hash":{},"data":data}) : helper)))
+    + "\" name=\"show-more-versions\" id=\"show-more-versions\" />\n<div class=\"loading hidden\" style=\"height: 50px\"></div>\n";
+},"useData":true});
+})();
\ No newline at end of file
diff --git a/apps/files_versions/js/templates/item.handlebars b/apps/files_versions/js/templates/item.handlebars
new file mode 100644
index 0000000000..6d11b9c088
--- /dev/null
+++ b/apps/files_versions/js/templates/item.handlebars
@@ -0,0 +1,22 @@
+<li data-revision="{{timestamp}}">
+	<div>
+		<div class="preview-container">
+			<img class="preview" src="{{previewUrl}}" width="44" height="44"/>
+		</div>
+		<div class="version-container">
+			<div>
+				<a href="{{downloadUrl}}" class="downloadVersion"><img src="{{downloadIconUrl}}" />
+					<span class="versiondate has-tooltip live-relative-timestamp" data-timestamp="{{millisecondsTimestamp}}" title="{{formattedTimestamp}}">{{relativeTimestamp}}</span>
+				</a>
+			</div>
+			{{#hasDetails}}
+				<div class="version-details">
+					<span class="size has-tooltip" title="{{altSize}}">{{humanReadableSize}}</span>
+				</div>
+			{{/hasDetails}}
+		</div>
+		{{#canRevert}}
+			<a href="#" class="revertVersion" title="{{revertLabel}}"><img src="{{revertIconUrl}}" /></a>
+		{{/canRevert}}
+	</div>
+</li>
diff --git a/apps/files_versions/js/templates/template.handlebars b/apps/files_versions/js/templates/template.handlebars
new file mode 100644
index 0000000000..f01a6f4162
--- /dev/null
+++ b/apps/files_versions/js/templates/template.handlebars
@@ -0,0 +1,10 @@
+<ul class="versions"></ul>
+<div class="clear-float"></div>
+<div class="empty hidden">
+	<div class="emptycontent">
+		<div class="icon-history"></div>
+		<p>{{emptyResultLabel}}</p>
+	</div>
+</div>
+<input type="button" class="showMoreVersions hidden" value="{{moreVersionsLabel}}" name="show-more-versions" id="show-more-versions" />
+<div class="loading hidden" style="height: 50px"></div>
diff --git a/apps/files_versions/js/versionstabview.js b/apps/files_versions/js/versionstabview.js
index 3a9026901e..dacd567fdc 100644
--- a/apps/files_versions/js/versionstabview.js
+++ b/apps/files_versions/js/versionstabview.js
@@ -11,42 +11,6 @@
 /* @global Handlebars */
 
 (function() {
-	var TEMPLATE_ITEM =
-		'<li data-revision="{{timestamp}}">' +
-		'<div>' +
-		'<div class="preview-container">' +
-		'<img class="preview" src="{{previewUrl}}" width="44" height="44"/>' +
-		'</div>' +
-		'<div class="version-container">' +
-		'<div>' +
-		'<a href="{{downloadUrl}}" class="downloadVersion"><img src="{{downloadIconUrl}}" />' +
-		'<span class="versiondate has-tooltip live-relative-timestamp" data-timestamp="{{millisecondsTimestamp}}" title="{{formattedTimestamp}}">{{relativeTimestamp}}</span>' +
-		'</a>' +
-		'</div>' +
-		'{{#hasDetails}}' +
-		'<div class="version-details">' +
-		'<span class="size has-tooltip" title="{{altSize}}">{{humanReadableSize}}</span>' +
-		'</div>' +
-		'{{/hasDetails}}' +
-		'</div>' +
-		'{{#canRevert}}' +
-		'<a href="#" class="revertVersion" title="{{revertLabel}}"><img src="{{revertIconUrl}}" /></a>' +
-		'{{/canRevert}}' +
-		'</div>' +
-		'</li>';
-
-	var TEMPLATE =
-		'<ul class="versions"></ul>' +
-		'<div class="clear-float"></div>' +
-		'<div class="empty hidden">' +
-		'<div class="emptycontent">' +
-		'<div class="icon-history"></div>' +
-		'<p>{{emptyResultLabel}}</p>' +
-		'</div></div>' +
-		'<input type="button" class="showMoreVersions hidden" value="{{moreVersionsLabel}}"' +
-		' name="show-more-versions" id="show-more-versions" />' +
-		'<div class="loading hidden" style="height: 50px"></div>';
-
 	/**
 	 * @memberof OCA.Versions
 	 */
@@ -182,19 +146,11 @@
 		},
 
 		template: function(data) {
-			if (!this._template) {
-				this._template = Handlebars.compile(TEMPLATE);
-			}
-
-			return this._template(data);
+			return OCA.Versions.Templates['template'](data);
 		},
 
 		itemTemplate: function(data) {
-			if (!this._itemTemplate) {
-				this._itemTemplate = Handlebars.compile(TEMPLATE_ITEM);
-			}
-
-			return this._itemTemplate(data);
+			return OCA.Versions.Templates['item'](data);
 		},
 
 		setFileInfo: function(fileInfo) {
diff --git a/build/compile-handlebars-templates.sh b/build/compile-handlebars-templates.sh
index a3463a04ea..2f83dd3956 100755
--- a/build/compile-handlebars-templates.sh
+++ b/build/compile-handlebars-templates.sh
@@ -22,6 +22,9 @@ handlebars -n OCA.Files.Templates apps/files/js/templates -f apps/files/js/templ
 # Comments app
 handlebars -n OCA.Comments.Templates apps/comments/js/templates -f apps/comments/js/templates.js
 
+# Versions app
+handlebars -n OCA.Versions.Templates apps/files_versions/js/templates -f apps/files_versions/js/templates.js
+
 
 if [[ $(git diff --name-only) ]]; then
     echo "Please submit your compiled handlebars templates"
diff --git a/tests/karma.config.js b/tests/karma.config.js
index 93b7b4113f..8339285116 100644
--- a/tests/karma.config.js
+++ b/tests/karma.config.js
@@ -77,6 +77,7 @@ module.exports = function(config) {
 				srcFiles: [
 					// need to enforce loading order...
 					'apps/files_versions/js/versionmodel.js',
+					'apps/files_versions/js/templates.js',
 					'apps/files_versions/js/versioncollection.js',
 					'apps/files_versions/js/versionstabview.js'
 				],