2017-01-20 13 views
1

我有一個相當老式的web應用程序有不同的網址和頁面主要在服務器網站上爲每個,如/contacts,/orders,/orders/123456我應該將我的前端代碼分爲常用和頁面特定的部分嗎?

我想打破客戶端代碼轉換成通用和特定頁面的部分爲文件,這樣我會有這樣的文件列表:

/js/common.js 

/js/login_page.js 
/js/contacts_page.js 
/js/orders_page.js 
/js/orderview_page.js 
... 

這樣,我會在頁面中兩個鏈接 - 一個用於公用部分,另一個用於當前頁面代碼。

我認爲它可以使頁面加載更快,因爲不必加載與當前頁面無關的代碼,但只加載需要的代碼。

雖然,有一種趨勢是將整個文件集合成一個文件,使得第一次加載的時間更長,但隨後其他頁面代碼立即加載,因爲它已經在緩存中。

/js/app.bundle.js 

我應該選擇什麼策略以及哪些因素會影響決策?

+0

這個東西,afaik,就是隻保存一個包,用於保存一個http請求,這比發出兩個請求要快 - 一個用於通用代碼,一個用於特定 - 即使代碼量較大。但是,這實際上取決於瀏覽器處理併發請求的方式,對頁面正在執行的供應商腳本和其他資源的請求數以及頁面加載資源的域配置。我相信,一種策略在舊版瀏覽器中可能會更快,而在最新的瀏覽器中可能會更慢。然而,一個或兩個捆綁之間的差異很小。 – Sergeon

回答

0

據我所知,你有2個選擇在這裏。首先是爲每個頁面使用單獨的JS文件,而第二個選項是將所有文件組合在一起。 無論在哪種情況下,如果文件緩存在瀏覽器中,重要的是初始加載時間。

加載不同文件的延遲主要是因爲文件的大小,而在分開下載每個文件的開銷中會浪費一些時間。 因此,如果您需要爲特定頁面下載10個文件,那麼將所有這10個文件組合起來會比將10個不同文件放在一起快一點。但是,如果您泡100個文件,但只需要10個文件,那麼單獨下載這10個文件將是更好的選擇。

我想說,你需要使用混合的方法,其中你肯定將文件合併在一起,但不是所有的文件都集中在一個單獨的包中。可以根據需要將文件分成不同的組。比方說,你訂購頁面需要5個JS文件(orders_page.js,orderview_page.js等),然後將所有這些組合在一起。同樣,與聯繫人有關的文件也可以杵在一起。您可以在用戶訪問這些特定頁面時下載它們。儘管如此,你仍然應該單獨維護你的代碼庫,並尋找一些能夠「構建」你的代碼進行生產的庫。一些優化變量名稱(縮短它),刪除空格並按照您的分組結合JS文件。可讀性將在生產中受到影響,但它會使事情變得更快,您仍然可以在開發環境中使用乾淨/易讀的代碼。

相關問題