Hacker News Reader

Comment by mevile | Hacker News Reader

So what I still don't understand is how es6 module imports work with requests. Even reading through that blog post it's not obvious to me. Does the browser make an HTTP request for the file on the server based on the relative location on the server? So if I have type="module" and app.js is in example.com/js/app.js and then I have an import statement for ./foo/bar.js it makes that request to example.com/js/foo/bar.js? I imagine all these requests would add up and will block if so. With HTTP2 maybe it would be OK to do it this way but I see myself creating single JavaScript builds for the foreseeable future making this sort of module support unlikely to help in anything other than development (which still is nice).

View on HN

Note that since ES6 imports are statically defined, the browser can find and begin to download dependent files before even parsing the actual JS. They could even start downloading dependent files in parallel before the first file is fully downloaded.

But bundling will still probably be faster and will probably continue to be a mainstay of production web apps, just like minification already is.

>Note that since ES6 imports are statically defined, the browser can find and begin to download dependent files before even parsing the actual JS.

I think you meant executing the actual JS. Finding the imports requires parsing the file, and imports can be anywhere in the file as long as they're at the top level.

It depends. For HTML all browsers do a form of "preparsing" where they do simplistic string searches for things that look like URLs and start speculatively fetching based on that. You could imagine a similar pass for JS modules.

Ah, that's cool.

Firefox doesn't do simplistic string searches, for what it's worth. It actually tokenizes the HTML and kicks off loads from tokenization.

If someone then misuses document.write the token stream has to be thrown out and things have to be retokenized, but that's rare in practice. The tradeoff is better accuracy of the preloader and not having to go through the text twice unless someone is misusing document.write.

You still have to fetch a module before you know it's dependencies. So if A depends on B which depends on C, you must fetch those sequentially. With a deep dependency graph this will be a problem.

Bundling may not necessarily be faster with HTTP/2 and proper cache controls.

Right, with HTTP2 and caching, you'd actually save on bandwidth if you didn't have to deploy a new build whenever an individual file changed.

I don't see a practical difference between bundling and server push to the developer. You are still using tooling that traces your dependency graph and produces... something. In the case of a bundler it produces a concatenated script and in the case of http push it produces a list of files that should be sent with a particular route. To the developer, why should the latter be preferred over the former?

From a developer side, at least, HTTP/2+caching (with or without server push) is preferential in that the browser handles everything (and knows what it needs) versus bundling which is a build process of some sort.

From a developer perspective, producing the only the dependency graph is still going to be faster and need less overall IO than building a bundle. You can get a sense of it today with jspm dep-cache versus jspm bundle times.

Three reasons off the top of my head: - Smaller cacheable objects -- every change you make doesn't invalidate the whole "bundle". - If there are many permutations of the optimal bundles: different browsers, different pages use different scripts, etc. - The browser does not need to wait for the "full bundle" to download to execute your app/site -- it can start once the first necessary assets are loaded.

In one project I worked on, we had 3 bundles: - early load (inside the head tag) - deferred load secondary (after body tag, for the other site pages) - deferred load primary (after the body tag, for the 'hot' pages of the site) With a optimal http/2.0 setup, we wouldn't need to make these never fully optimal bundles.

Yes, it makes separate requests, like if you made separate script tags (just using module semantics instead). With HTTP2 it will be ok, but you will still need something that understands your dependency graph so your server knows which modules to include with the request.

I guess service workers might solve a lot of issues here. You could do weird stuff like basically serving a tar file for all assets and use a service worker to handle individual requests.

That's a really smart idea, I hadn't considered that. Once you add in caching you might get pretty reasonable performance.

Also, the not yet implemented module loader spec would include a format similar to the AMD bundle format where modules are wrapped in calls to `System.register`.

There's no such bundling format under consideration, as far as I'm aware. System.register is a SystemJS API, not a spec one.

The Loader spec does include the concepts of a module registry and a low level API for them. From what I can tell skimming the specs, the high level construct of System.register has been in and out of the spec. Also from what I can tell, System.register may be possible to be implemented on top of the low level API regardless of whether it makes it into the final spec or not.

This is an interesting idea. On the other hand, I think if you started packing everything into a tar file, that could as well be a js file.

> On the other hand, I think if you started packing everything into a tar file, that could as well be a js file.

Modules give you a certain degree of namespacing, which is nice. Compiling down to a tar to be served to a Service Worker is undoubtedly easier than the mangling needed to remove the modules.

I recently wrote about this, and how it can be solved using HTTP/2 and Service Workers: https://mariusgundersen.net/module-pusher/

Reply on news.ycombinator.com