<div dir="ltr">> <span style="color:rgb(51,51,51);font-family:Georgia,"Times New Roman",Times,serif;font-size:16px">how would i transition from development-mode (20 es-module files) -> production-mode (1 rollup </span><span style="color:rgb(51,51,51);font-family:Georgia,"Times New Roman",Times,serif;font-size:16px">file)?<br><br>Place all of the code to be exported in 1 file? </span><div><span style="color:rgb(51,51,51);font-family:Georgia,"Times New Roman",Times,serif;font-size:16px"><br></span></div><div><span style="color:rgb(51,51,51);font-family:Georgia,"Times New Roman",Times,serif;font-size:16px">> </span><span style="color:rgb(51,51,51);font-family:Georgia,"Times New Roman",Times,serif;font-size:16px">with some of them having circular-references</span></div><div><span style="color:rgb(51,51,51);font-family:Georgia,"Times New Roman",Times,serif;font-size:16px"><br></span></div><div><span style="color:rgb(51,51,51);font-family:Georgia,"Times New Roman",Times,serif;font-size:16px">Not certain how that is possible when using ```import``` within ```<script type="module">```?</span></div><div><span style="color:rgb(51,51,51);font-family:Georgia,"Times New Roman",Times,serif;font-size:16px"><br></span></div><div><span style="color:rgb(51,51,51);font-family:Georgia,"Times New Roman",Times,serif;font-size:16px">> </span>how many async-modules can js-app practically load?</div><div><br></div><div>Again, how many have you tried to load? 100? 500? 1000? Either should be possible.</div><div><br><font color="#333333" face="Georgia, Times New Roman, Times, serif"><span style="font-size:16px">What specific issue are you actually to resolve?</span></font></div></div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Fri, May 31, 2019 at 5:40 PM kai zhu <<a href="mailto:kaizhu256@gmail.com">kaizhu256@gmail.com</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr"><div dir="ltr">> Oh, and yes, I've loaded upwards of 50-100 modules in development. 20</div>modules is *easy* to achieve in single-page apps.<br><div dir="ltr"><br></div><div>was that with some combination of babel/rollup/webpack or pure-es6?</div><div>if i want to develop a pure-es6 webapp (no babel), how would i transition from development-mode (20 es-module files) -> production-mode (1 rollup file)?</div><div><br></div></div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Fri, May 31, 2019 at 10:47 AM Isiah Meadows <<a href="mailto:isiahmeadows@gmail.com" target="_blank">isiahmeadows@gmail.com</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex">If it's bundled by Rollup or Webpack into a single bundle, it's<br>
equivalent to a single `<script type="module" src="...">` pointing<br>
towards the original entry point, excluding network requests.* But in<br>
either case, you aren't listing 50 scripts, you're only listing the<br>
entry module and importing child modules within parent modules. Rollup<br>
and Webpack do mostly the same thing browsers do when it comes to<br>
resolving dependencies, just they generate a bundle afterwards where<br>
browsers execute code afterwards. Also, it's worth noting that the gap<br>
between a single large request and multiple smaller requests has<br>
shrunk a lot since HTTP/2 came along, since it's binary, it allows<br>
requests and response data to be interleaved, it better leverages the<br>
underlying TCP protocol format, and it allows servers to send data<br>
pre-emptively without the client requesting it first. (Web sockets are<br>
built on this functionality.) It's still better to bundle in general,<br>
but it's less of a problem not to.<br>
<br>
This is *not* the case for `<script type="module">` elements - those<br>
operate more like inline scripts that happen to have the ability to<br>
`import`.<br>
<br>
Oh, and yes, I've loaded upwards of 50-100 modules in development. 20<br>
modules is *easy* to achieve in single-page apps.<br>
<br>
* This is, of course, not the case if you are using pure ES6 and you<br>
aren't using any plugins to, say, run the original source through<br>
Babel for React + JSX or something.<br>
<br>
-----<br>
<br>
Isiah Meadows<br>
<a href="mailto:contact@isiahmeadows.com" target="_blank">contact@isiahmeadows.com</a><br>
<a href="http://www.isiahmeadows.com" rel="noreferrer" target="_blank">www.isiahmeadows.com</a><br>
On Sat, May 25, 2019 at 2:12 AM kai zhu <<a href="mailto:kaizhu256@gmail.com" target="_blank">kaizhu256@gmail.com</a>> wrote:<br>
><br>
> Asynchronous loading differs only in<br>
> that it takes more code to express the same logic and you have to take<br>
> into account concurrent requests (and you need to cache the request,<br>
> not the result), but it's otherwise the same from 1km away.<br>
><br>
><br>
> so async-loading 50 ```<script type="module">``` tags<br>
> has equivalent side-effect<br>
> as sync-loading single webpack-rollup (of same 50 modules)?<br>
><br>
> i have nagging suspicion of doubts.  has anyone tried native async-loading large numbers (>10) of<br>
> ```<script type="module">``` tags, and verify it resolves identically to using a single webpack-rollup?<br>
><br>
> again, i'm not that knowledgeable on es-modules, so above question may be trivially true, and i'm just not aware.<br>
><br>
> -kai<br>
><br>
> On 24 May 2019, at 23:41, Isiah Meadows <<a href="mailto:isiahmeadows@gmail.com" target="_blank">isiahmeadows@gmail.com</a>> wrote:<br>
><br>
> There's two main reasons why it scales:<br>
><br>
> 1. Modules are strongly encapsulated while minimizing global pollution.<br>
> 2. The resolution algorithm applies the same logic no matter how many<br>
> modules are loaded.<br>
><br>
> It's much easier for it to scale when you write the code unaware of<br>
> how many modules you might be loading and unaware of how deep their<br>
> dependency graph is. Fewer assumptions here is key. It's an<br>
> engineering problem, but a relatively simple one.<br>
><br>
> If you want a short example of how sync module resolution works, you<br>
> can take a look at this little utility I wrote:<br>
> <a href="https://github.com/isiahmeadows/simple-require-loader" rel="noreferrer" target="_blank">https://github.com/isiahmeadows/simple-require-loader</a>. That doesn't<br>
> asynchronously resolve modules, but it should help explain the process<br>
> from a synchronous standpoint. Asynchronous loading differs only in<br>
> that it takes more code to express the same logic and you have to take<br>
> into account concurrent requests (and you need to cache the request,<br>
> not the result), but it's otherwise the same from 1km away.<br>
><br>
> -----<br>
><br>
> Isiah Meadows<br>
> <a href="mailto:contact@isiahmeadows.com" target="_blank">contact@isiahmeadows.com</a><br>
> <a href="http://www.isiahmeadows.com" rel="noreferrer" target="_blank">www.isiahmeadows.com</a><br>
><br>
> On Thu, May 23, 2019 at 10:49 AM kai zhu <<a href="mailto:kaizhu256@gmail.com" target="_blank">kaizhu256@gmail.com</a>> wrote:<br>
><br>
><br>
> actually, i admit i don't know what i'm talking about.  just generally confused (through ignorance) on how large-scale es-module dependencies resolve when loaded/imported asynchronously.<br>
><br>
> On Wed, May 22, 2019 at 10:42 PM Logan Smyth <<a href="mailto:loganfsmyth@gmail.com" target="_blank">loganfsmyth@gmail.com</a>> wrote:<br>
><br>
><br>
> Can you elaborate on what loading state you need to keep track of? What is the bottleneck that you run into? Also to be sure, when you say async-load, do you mean `import()`?<br>
><br>
> On Wed, May 22, 2019, 20:17 kai zhu <<a href="mailto:kaizhu256@gmail.com" target="_blank">kaizhu256@gmail.com</a>> wrote:<br>
><br>
><br>
> i don't use es-modules.<br>
> but with amd/requirejs, I start having trouble with module-initializations in nodejs/browser at ~5 async modules (that may or may not have circular-references).  10 would be hard, and 20 would be near inhuman for me.<br>
><br>
> can we say its somewhat impractical for most applications to load more than 50 async modules (with some of them having circular-references)?  and perhaps better design/spec module-loading mechanisms with this usability concern in mind?<br>
><br>
> p.s. its also impractical for me to async-load 5 or more modules without using globalThis to keep track of each module's loading-state.<br>
> _______________________________________________<br>
> es-discuss mailing list<br>
> <a href="mailto:es-discuss@mozilla.org" target="_blank">es-discuss@mozilla.org</a><br>
> <a href="https://mail.mozilla.org/listinfo/es-discuss" rel="noreferrer" target="_blank">https://mail.mozilla.org/listinfo/es-discuss</a><br>
><br>
><br>
> _______________________________________________<br>
> es-discuss mailing list<br>
> <a href="mailto:es-discuss@mozilla.org" target="_blank">es-discuss@mozilla.org</a><br>
> <a href="https://mail.mozilla.org/listinfo/es-discuss" rel="noreferrer" target="_blank">https://mail.mozilla.org/listinfo/es-discuss</a><br>
><br>
><br>
</blockquote></div>
_______________________________________________<br>
es-discuss mailing list<br>
<a href="mailto:es-discuss@mozilla.org" target="_blank">es-discuss@mozilla.org</a><br>
<a href="https://mail.mozilla.org/listinfo/es-discuss" rel="noreferrer" target="_blank">https://mail.mozilla.org/listinfo/es-discuss</a><br>
</blockquote></div>