You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository has been archived by the owner on Oct 23, 2019. It is now read-only.
Originally, we used a single script element to bootstrap by injecting script elements that pointed to all the assets. This proved to be unscalable as a codebase with more than 500 files will introduce a lag on initialisation as the browser limits the number of parallel requests. At 500 files you're looking at (from memory) half a second, given that this is pretty much equivalent to importing lodash and react into a single file, this method is too slow for any real-world cases.
The fastest mechanism we ended up with was using a stream to push everything (except CSS + binary files) out memory. This did solve our performance issues, but it also introduced new problems relating to debugging and introspecting the built code. The single file stream breaks the easy 1-1 mapping from built files to their input, hence stack traces are pretty broken without source maps. Unfortunately, generating source maps for the entire stream is an extremely expensive process, so we used eval blocks to execute each file with an inline source maps. This is a similar approach to what webpack uses for some devtool options.
Unfortunately, the developer experience with eval'd scripts are not great. Browser's are designed to provide the best experience when debugging single script elements and inlined eval statements tend to break things in subtle and oft-inexplicable ways. Once you start developing cross browser, the various quirks start to become more pronounced.
Optimally, we want a delivery mechanism providing a developer-experience comparable to per-file script elements, without the limits that browsers apply on parallel requests.
The HTTP2 push mechanism allows a server to push assets down the wire that the client is expected to need soon. Pushing assets is intended for servers to pre-empt a client's request and reduce initialisation time. At this stage, it's the most likely solution to our problem.
The text was updated successfully, but these errors were encountered:
The big downside to HTTP2 is that all the browser vendors have indicated that they wont allow HTTP2 to function without TLS/SSL.
What this means is that you need to run your local dev server over HTTPS, which introduces some extra steps around certificates and enabling your browser to trust your server.
Should investigate HTTP2's push mechanism as an alternative to the faux-bundle streams that we're currently using to push assets down the wire.
This should be considered a take-two on #22
Background
Originally, we used a single script element to bootstrap by injecting script elements that pointed to all the assets. This proved to be unscalable as a codebase with more than 500 files will introduce a lag on initialisation as the browser limits the number of parallel requests. At 500 files you're looking at (from memory) half a second, given that this is pretty much equivalent to importing lodash and react into a single file, this method is too slow for any real-world cases.
The fastest mechanism we ended up with was using a stream to push everything (except CSS + binary files) out memory. This did solve our performance issues, but it also introduced new problems relating to debugging and introspecting the built code. The single file stream breaks the easy 1-1 mapping from built files to their input, hence stack traces are pretty broken without source maps. Unfortunately, generating source maps for the entire stream is an extremely expensive process, so we used eval blocks to execute each file with an inline source maps. This is a similar approach to what webpack uses for some
devtool
options.Unfortunately, the developer experience with eval'd scripts are not great. Browser's are designed to provide the best experience when debugging single script elements and inlined eval statements tend to break things in subtle and oft-inexplicable ways. Once you start developing cross browser, the various quirks start to become more pronounced.
Optimally, we want a delivery mechanism providing a developer-experience comparable to per-file script elements, without the limits that browsers apply on parallel requests.
The HTTP2 push mechanism allows a server to push assets down the wire that the client is expected to need soon. Pushing assets is intended for servers to pre-empt a client's request and reduce initialisation time. At this stage, it's the most likely solution to our problem.
The text was updated successfully, but these errors were encountered: