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＆＃39; s $ 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的大小，这比第二次请求更好）。

感谢您的想法和帮助。希望这也有助于某人

如何将json文件压缩为javascript

2 个答案:

解决方案

结果：