dfkaye · September 22, 2021 08:53 · nzakas · Jul 12, 2013 · dfkaye · Jul 12, 2013
diff --git a/inline-js-data-uri.txt b/inline-js-data-uri.txt
 8 JUL 2013

 Couldn't sleep - kept thinking about modules with blobs, workers, data:URIs - then realized this was 
 staring us in the face this whole time, verified it with firebug and some test code, wrote the gist 
 down - now go build it.

 Starts with Tobie Langel's lazy evaluation of JS ~ 
  http://calendar.perfplanet.com/2011/lazy-evaluation-of-commonjs-modules/

 and Tom Dale's http://tomdale.net/2012/01/amd-is-not-the-answer/

 Each of those proposes | implements a build step that creates a map in JS of files matching source names 
 or paths to an inlined string of their actual source:

  files['/path/to/source/file.js'] = 'var x = require("something.js"); module.exports = /* etc */ ';

 In the browser, these are downloaded but not parsed/evaluated by the JS engine until they are first "required" 
 by another module.  As both writers address commonJS, their process resembles this:

  function process(path) {
  
    // caching logic omitted for brevity
  
    var source = files[path];
    var factory = Function("function(module, exports, require) {" + source + "}");
    var module = new Module(path);
    
    factory.call(module, module.exports, module.require)
  }


 SO WHAT - What's *NEW* in this gist?

 Instead of file source as text, convert it to dataURI strings instead.

 Involves:
 + For each JavaScript source file, run compression - http://closure-compiler.appspot.com/home
 + Convert compressed version to base64 (see Hixie's data URI kitchen, for example) - 
    http://software.hixie.ch/utilities/cgi/data/data

    Leave default type as text/plain charset utf8 
    Select Base 64 encoding
    > Generate <

    data:text/plain;base64, etc etc

 + Copy the generated URI to the mapping of filenames (assuming you're doing it Langel's & Dale's way)

  files['/path/to/source/file.js'] = dataURI

 + Use a client-side loader to evaluate | return required files from the map:

  // caching logic omitted...

  function load(path) {
    var dataURI = files[path], d = document, s = d.createElement('script');
    s.onload = function (e) {
       console.log(e)
    };
    s.src = dataURI;
    d.documentElement.firstChild.appendChild(s);
  }

 You can view a quick and dirty test page that uses the dataURI technique (without the load/require 
 commonjs support but with a big source file) 
  here => https://rawgithub.com/dfkaye/datauri-vs-src-test/master/index.html


 Further work -

 FOR WORKERS, use blobs as per http://www.html5rocks.com/en/tutorials/workers/basics/#toc-inlineworkers-bloburis

 NEXT STEP - figure out decoding to source - hard to debug of course - dataURI? - but so are compressed/minified files
	8 JUL 2013

	Couldn't sleep - kept thinking about modules with blobs, workers, data:URIs - then realized this was
	staring us in the face this whole time, verified it with firebug and some test code, wrote the gist
	down - now go build it.

	Starts with Tobie Langel's lazy evaluation of JS ~
	http://calendar.perfplanet.com/2011/lazy-evaluation-of-commonjs-modules/

	and Tom Dale's http://tomdale.net/2012/01/amd-is-not-the-answer/

	Each of those proposes \| implements a build step that creates a map in JS of files matching source names
	or paths to an inlined string of their actual source:

	files['/path/to/source/file.js'] = 'var x = require("something.js"); module.exports = /* etc */ ';

	In the browser, these are downloaded but not parsed/evaluated by the JS engine until they are first "required"
	by another module. As both writers address commonJS, their process resembles this:

	function process(path) {

	// caching logic omitted for brevity

	var source = files[path];
	var factory = Function("function(module, exports, require) {" + source + "}");
	var module = new Module(path);

	factory.call(module, module.exports, module.require)
	}


	SO WHAT - What's NEW in this gist?

	Instead of file source as text, convert it to dataURI strings instead.

	Involves:
	+ For each JavaScript source file, run compression - http://closure-compiler.appspot.com/home
	+ Convert compressed version to base64 (see Hixie's data URI kitchen, for example) -
	http://software.hixie.ch/utilities/cgi/data/data

	Leave default type as text/plain charset utf8
	Select Base 64 encoding
	> Generate <

	data:text/plain;base64, etc etc

	+ Copy the generated URI to the mapping of filenames (assuming you're doing it Langel's & Dale's way)

	files['/path/to/source/file.js'] = dataURI

	+ Use a client-side loader to evaluate \| return required files from the map:

	// caching logic omitted...

	function load(path) {
	var dataURI = files[path], d = document, s = d.createElement('script');
	s.onload = function (e) {
	console.log(e)
	};
	s.src = dataURI;
	d.documentElement.firstChild.appendChild(s);
	}

	You can view a quick and dirty test page that uses the dataURI technique (without the load/require
	commonjs support but with a big source file)
	here => https://rawgithub.com/dfkaye/datauri-vs-src-test/master/index.html


	Further work -

	FOR WORKERS, use blobs as per http://www.html5rocks.com/en/tutorials/workers/basics/#toc-inlineworkers-bloburis

	NEXT STEP - figure out decoding to source - hard to debug of course - dataURI? - but so are compressed/minified files
No results found