2013-10-02 147 views
0

我正在構建一個框架,將所有JavaScript文件合併到一個文件中(縮小)。異步加載JavaScript函數。

例子:

function A() {} function B() {} 

通過精縮文件我想加載功能異步並在其工作完成從HTML刪除。

實施例:負載函數A當需要而不是功能B.

我看到一個框架Require.js但在它的負荷根據要求JavaScript文件異步。

是否有任何框架可以根據需要加載JavaScript函數,這些框架是在同一個js文件中定義的。

+0

加載單個函數實際上是一種反優化。通過犧牲網絡負載(每個函數導致瀏覽器打開服務器的另一個套接字),您正在優化內存佔用空間和編譯時間(通常不是嚴重的瓶頸),這是Web應用程序的主要瓶頸。 – slebetman

回答

1

串聯的缺點是您對包含在給定頁面加載中的內容的細節控制不夠細緻。對此的解決方案是,不要創建一個連接文件,而是創建的功能,可以更加模塊化地包含這些功能。因此,你不需要在只能使用一些特定功能的頁面上使用所有的JS。這實際上也可能是速度上的勝利,因爲只有一個JS文件可能不會利用瀏覽器的6個併發連接。而且,一旦SPDY被完全採用,一個大文件實際上會比更小文件更少(因爲連接可以被重用)。但是,縮小仍然很重要。

所有這一切說,似乎你要求一些有點難以取消。當瀏覽器加載腳本時,它會立即解析並執行。你不能加載文件,然後......只加載文件的一部分。通過連接,你限制了自己的大負載。

可以通過將腳本包裝在塊註釋中,然後從腳本節點訪問腳本並且它可以延遲執行......但這看起來並不像您要求的那樣。不過,如果您想在不鎖定用戶界面的情況下預加載模塊,它可能是一種有用的策略。

+0

我在你的答案中得到了一個解決方案,通過在不同文件中分別縮小所有類,我可以使用requirejs。 做這個代碼也會被縮小,我可以使用require js根據需求加載類。 非常感謝Wyatt的建議。 –

+0

是的縮小隻是減少通過電線發送的字節,所以無論你有多少文件,你都會得到速度提升。很高興我能幫上忙。 – Wyatt

0

這不是javascript的工作原理。當加載函數的源文件時,該函數在內存中可用。由於語言被解釋,只要源文件被瀏覽器讀取,所定義的函數就會被加載。

最好的辦法是使用Require.js或類似的東西,如果你想有明確的依賴鏈。