</p> <pre><code>var tpl = ` <div> template <span>string</span> </div> ` </code></pre> <p>üretecektir

Question

şey gibi ES6 Şablon Dizeler küçültmek veya çirkinleştirmek için bir yol:

var tpl = "\n<div> \n template\n <span>string</span>\n</div>\n"; 

Ne gereken tüm diğer html gibi, fazladan boşluklar ve belki satır sonları kurtulmak için kıymetlendirme araçları.

Yani benzer hale olmalıdır:

"<div>template<span>string</span></div>" 

Bunu başarmak için herhangi bir yolu akıllıca ve yıkılmaz var mı?

Answer 1

iyi yaklaşım muhtemelen Temelde hiçbir etiketiyle aynıdır

function minifyHTML(parts, ...values) { 
    var out = []; 
    out.push(parts[0]); 
    for (var i = 1; i<parts.length; i++) 
     out.push(parts[i], String(arguments[i])); 
    return out.join(""); 
} 

ile başlayabilirsiniz

var tpl = minifyHTML ` 
<div> 
    template 
    <span>string</span> 
</div> 
`; 

gibi etiketli bir şablon kullanıyor.

Şimdi, bu şablonun parts değerini dinamik olarak küçültmek için genişletebilirsiniz, böylece tpl beklenen dizge haline gelir.

Bir sonraki adım, derleme boru hattınızda bunu statik bir optimizasyon olarak tanıtmaktır. Etiketin tanımlayıcı minifyHTML olduğu AST'deki etiketli şablon ifadeleriyle eşleşen bir kuralın nasıl yazılacağını belirleyin ve ardından da, paylaştırılmış dosyalara ES6/TypeScript kaynağını derleme/paketlemenin bir parçası olarak değerlendirin.