2016-05-16 73 views
0

我使用車把我的應用程序,它主要是針對桌面瀏覽器模板引擎。預編譯車把模板雙打文件大小

目前我將所有模板以HTML格式分發並在瀏覽器中編譯。我想將預編譯應用於我的模板,以使我的應用程序更快,但事情並沒有按照我的想法工作。

我運行命令這樣的預編譯,並儘量減少我的模板:

handlebars -m example.handlebars -f example.js

然後,我已經得到了example.js文件大小增加了一倍

我砍掉消耗瀏覽器無需編譯模板和車把的運行時包要小得多。但是我的模板的文件大小比我得到的要多。

所以我都做什麼毛病我的預編譯模板時?
還是我誤解預編譯模板的意義?

回答

2

預編譯模板時,因爲像這樣的表情總是會有大小的開銷:

<div>{{values.abc}}</div> 

將被編譯到是這樣的:

function program(data) { 
    return '<div>' + program2(data) + '</div>'; 
} 
function program2(data) { 
    return data.values ? data.values.abc ? data.values.abc : '' : ''; 
} 

但這裏的大小不應該是一個主要關注。如果是這樣,您應該考慮在需要時動態加載模板,而不是一次將所有內容發送到客戶端。

+1

要削減「一些」(雖然很少)的尺寸,我再壓縮我的車把HTML預編譯之前。 但是,不要煩惱了,因爲預編譯的文件大小增加 - 這是在客戶端編譯的重大改進。 –

+1

@SebastienDaniel HTML縮小通常不會給太多,因爲無論如何一切都會發送gzip。雖然JavaScript縮小(uglifying)可以提供一些額外的幫助,但代碼的結構可以更改以及空格,因此可以刪除換行符。 – andlrc

+0

但動態加載模板無法解決「擴展文件大小」問題。更大的文件需要更多的時間進行網絡傳輸,所以我懷疑是否值得這樣做。我測試了在chrome中編譯速度的模板,速度非常快。 – AmBeta