如何將json文件壓縮為JavaScript

Question

我正在做一個瀏覽器游戲（僅限客戶端）。 我正在嘗試使其更小（意味着文件大小），這是移動版本的第一步。 我使用LESS縮小了CSS，使用uglify縮小了JS，還使用grunt-angular-templates縮小了角度模板。 因此，目前我正在加載很少的文件：

• 的index.html
• app.js
• app.css
• images.png（一個包含所有圖像的文件）

但是剩下的問題是JSON數據文件。 有（或將有）多個級別，每個級別都有自己的JSON數據文件。 另外，還有一些規則定義等。問題是，這些JSON文件在需要時會動態加載。

我現在正試圖找到一種方法，如何以某種方式將這些文件（在構建時，可能需要執行一些艱巨的任務）整合到一個文件中，甚至更好地將其直接整合到app.js中。 我在編寫PHP腳本+ JS類時沒有問題，可以做到這一點，但是我首先嘗試找到一些完成的解決方案。

有人知道這樣的事情嗎，還是我沒有想到其他解決方案？ 謝謝你的幫助。

====

編輯 ：

1）這樣做的目的是擺脫X請求，並向JSON文件發出一個請求（或零個請求）。

2）編譯的東西根本不必是JSON。 我的想法的一部分：

JsonManager.add('path/to/json/file.json', '{"json":"content of file"}');

手動創建所有這些行是一個壞主意，我在問什么，如果有的話，可以為我完成這項工作。

3）理想情況下，我正在尋找一些類似於grunt-angular-templates任務對HTML模板執行的解決方案（將它們縮小並使用Angular的$ templateCache將其添加到app.js中）

Answer 1

假設您有兩個JSON： {'a':1}和{'b':2} 。

您不能簡單地將它們串聯在一起，因為它們在一起將不是有效的JSON，例如，此{'a':1}{'b':2}不是有效的JSON。 您可以使用JS和CSS來執行此操作，但不能使用JSON。

唯一的選擇是將它們包含在更大的結構中：

[
  {'a':1},
  {'b':2}
]

如果您的代碼結構允許執行此操作，則可以使用任何現有的JS壓縮器/ uglifier來壓縮結果。

Answer 2

對於任何與我有相同問題的人：

我放棄尋找已經完成的解決方案，並做出了自己的解決方案：

解決方案

• 我已經編寫了PHP腳本，該腳本遍歷數據目錄中的文件並列出了所有JSON文件。 它還會縮小它們的內容並創建一個大數組，其中鍵作為相對文件名，值作為文件的JSON內容。 然后，它創建一個.js文件，在該文件中，此大數組再次被編碼為JSON，並提供給JavaScript變量（在我的情況下為模塊常量-Angular）

• 我創建了一個包裝器類，該包裝器將這些數據作為文件提供，例如：

var data = dataStorage.getData('levels/level01.json'); // returns JSON content of file located at path/to/data/files/levels/level01.json but without any AJAX call or something

• 我用grunt-shell來自動運行這個php文件

• 我將結果.js文件添加到文件列表中，應通過uglify將其縮小（並連接在一起）。

結果：

• 我可以在任何結構中創建任意數量的JSON文件，並使用該包裝器類從js代碼鏈接到它們，但是不會觸發AJAX調用。

• 我減少了啟動時需要加載的文件數量（但app.js的大小有所增加，這比第二個請求要好）。

感謝您的想法和幫助。 希望這也可以幫助某人