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)

You say "loaded dynamically when needed" but then want to combine json "levels" into a single file. This appears contradictory -- please explain. It's a good question, but needs clarification. — Yogi
– Yogi, Commented May 23, 2015 at 19:54

c-smile · Accepted Answer · 2015-05-23 19:33:51Z

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, e.g. 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.

answered May 23, 2015 at 19:33

c-smile

27.6k8 gold badges66 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tomáš Blatný Over a year ago

Well, its some part of thing i thought i would make. My idea was something similar to Angular's $templateCache :) And I was asking about complete solution. But thanks anyway.

Tomáš Blatný · Accepted Answer · 2015-05-23 21:36:48Z

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, e.g.:

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

Collectives™ on Stack Overflow

How to compress json files into javascript

2 Answers 2

1 Comment

The solution

The result:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

The solution

The result:

Comments

Your Answer

Sign up or log in

Post as a guest

Related