如何將小部件webapp框架與SEO友好的CSS和JS文件結合起來

Question

我正在使用Zend框架和自制小部件系統編寫webapp。 每個小部件都有一個控制器，如果選擇，可以選擇渲染其中一個視圖。 這確實有助於我們在網站的任何位置模塊化，重新配置和重用小部件。

問題是每個小部件的視圖都包含自己的JS和CSS代碼，當整個頁面放在一起時會導致非常混亂的HTML代碼。 你到處都有口袋的樣式和腳本標簽。 由於我確定你知道，這對於很多不同的原因是不好的，但它對我們的SEO也有深遠的影響。

我已經提出了幾個解決方案 ：

1. 將每個小部件的每個視圖的CSS和JS分離到它自己的文件中 - 這對於加載時間有很多缺點（需要單獨加載更多資源）並且它使編碼變得非常困難，因為現在你必須打開3-4個文件只是為了編輯一個小部件。

2. 將所有小部件CSS組合成一個單獨的文件（與JS相同） - 當有人進入網站時，也會導致大量負載，混合所有小部件的CSS和JS，因此更難跟蹤它們，以及其他我確信你能想到的問題。

3. 創建一個使用方法1（每個小部件單獨的CSS和JS）的系統，在交付頁面時，將所有CSS和JS拼接在一起。 這顯然需要更多的處理時間，當然還需要創建這樣的系統等。

我的問題是你們對這些解決方案的看法，或者是否有你知道的預先存在的解決方案（或任何可能有幫助的技術）解決這個問題。 我非常感謝你的所有想法和評論!!

多謝你們，

阿里

Answer 1

使用方法2，您將能夠利用瀏覽器緩存。 如果適當，如果站點有一個帶有導航等的“前門”輸入頁面而不需要小部件庫，則可以在加載着陸頁后為其他頁面預加載CSS和JS。

如果你通過像YUICompressor這樣的東西運行你的JS，然后確保服務器gzips JS和CSS文件，你真的不是在談論那么多的東西，除非你的代碼真的很松弛。 如果您利用托管在可靠網站（如Google的API存儲庫）上的庫，那么您可以將自己的代碼縮小。 （我對Zend一無所知，因此可能相關或不相關。）

Answer 2

我肯定會選擇第三種方法。 您可以獲得第一種方法中描述的分離靈活性，但您可以獲得微調應用程序性能的能力（正如Pointy所指出的那樣）。

您只需要一些中央注冊系統（一個類），您可以使用它來跟蹤需要加載的樣式表。

Styles::add_sheet('widget_1.css');

此外，您可以向此類添加觸發器（方法），以便處理緩存的代碼可以跟蹤是否需要重建連接的樣式表。

if (Styles::cache_needs_update()) {
  // rebuild (concatenate) stylesheet and save in cache
}

為了更進一步，還可以通過模塊或其他類型的分組標准來連接樣式表。 當有很多樣式表（或js文件）時，這些連接的樣式表組可以單獨緩存。

上面的代碼示例會變成類似的東西

Styles::add_sheet('widget_1.css','group_name');

if (Styles::cache_needs_update('group_name')) {
  // rebuild (concatenate) stylesheet for this 'group_name' and save in cache
}

Answer 3

不確定這是否可以在PHP中使用，但如果您能夠推遲頁面傳輸直到頁面處理完畢;

• 讓每個小部件使用一些靜態方法在頁面上注冊它
• 在渲染管道中放置一個鈎子，用於讀取和連接所包含的窗口小部件所需的所有資源
• 修改響應以包含資源
• 將響應發送給客戶端