How to compress json files into javascript

Question

I am making a browser game (client side only). I am trying to make it smaller (meaning file sizes), which is first step for mobile version. I have minified CSS using LESS, JS using uglify and also angular templates using grunt-angular-templates. So at this moment I am loading very small number of files:

• index.html
• app.js
• app.css
• images.png (one file with all images)

But the remaining problem are JSON data files. There are (or will be) many levels and each level has its own JSON data file. Also there are some rule definitions etc. The problem is, that these JSON files are loaded dynamically when needed.

I am now trying to find a way, how to somehow get these files (at build time, probably some grunt task) into one file, or even better - directly into app.js. I have no problem in writing PHP script + JS class, that would do this, but I first tried to find some finished solution.

Does anybody know about something like that, or is there any other solution that I am not thinking about? Thanks for any help.

====

EDIT :

1) The point of this is getting rid of X requests and making one request (or zero) for JSON files.

2) The compiled thing does not have to be JSON at all. Part of my idea:

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

making all these lines manually is bad idea, I was asking about something, if there is anything, that could do this job for me.

3) Ideally i am looking for some solution similar to what grunt-angular-templates task does with HTML templates (minifies them and adds them to app.js using Angular's $templateCache)

Answer 1

Say you have two JSONs: {'a':1} and {'b':2} .

You cannot simply concatenate them into one chunk as together they will not be a valid JSON, eg this {'a':1}{'b':2} is not valid JSON. You can do this with JS and CSS but not JSON.

The only option is to include them into larger structure:

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

If your code structure allows to do this then you can use any existing JS compressor/uglifier to compress the result.

Answer 2

For anybody who has same problem as me:

I gave up finding already finished solution, and made my own:

The solution

• I have written PHP script, that iterates over files in data directory and lists all JSON files. It also minifies their contents and creates one big array, with keys as relative file names and values as JSON content of files. It then creates a .js file, in which this big array is encoded as JSON again and given to a JavaScript variable (module constant in my case - Angular)

• I created a wrapper class, which serves this data as files, eg:

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

• I used grunt-shell to automate running this php file

• I added the result .js file to list of files, which should be minified by uglify (and connected together).

The result:

• I can create any number of JSON files in any structure and link to them from js code using that wrapper class, but no AJAX calls are fired.

• I decreased number of files needed to load at startup (but increased app.js size a bit, which is better than second request).

Thanks for your ideas and help. Hope this also helps someone