<div dir="ltr">> your rollup solution is interesting, <div><br></div><div>What  is "rollup" referring to? </div><div><br></div><div>> but i get an error when run in chrome (i changed to n=20 to prevent name-collision, but it still happens).  </div><div><br></div><div>The duplicate ("collision") entry an ```try..catch``` block is included in the code to demonstrate given an array of module names to be exported and imported as identifiers 1) duplicate entries can be filtered; 2) if a plain object is exported duplicate identifiers ("collision") is not possible as a JavaScript plain object does not have duplicate property names ("collision"); if there is an issue with identifiers in a module the cause would not be the number of async-modules loaded ("how many"), but the naming of the identifiers within the code, using or not using ```const``` or ```let```. Still not sure what the actual issue is?</div><div><br></div><div>> don't completely understand how it works, </div><div><br></div><div>Use an ```async``` function to fetch data, check for the described "collision" , create a ```data URI``` to be imported, optionally, append addition code to be executed within the ```<script type="module">```.</div><div><br></div><div>> but not sure of suitability for production-use, because of its dynamic <script> tag generation.<br></div><div><br></div><div>What is the issue with dynamic ```<script>``` tag generation? </div><div><br></div><div>There is more than one possible approach to achieve the presumptive requirement, that is still not clear to the exclusion of what is not the expected result.<br></div><div><br></div><div>There were no restrictions described at the OP and following messages other than other than </div><div><br></div><div>> <span style="color:rgb(51,51,51);font-family:Georgia,"Times New Roman",Times,serif;font-size:16px">pure-es6 application with 20 es-modules rolled-up into one [production] bundle?</span></div><div><span style="color:rgb(51,51,51);font-family:Georgia,"Times New Roman",Times,serif;font-size:16px"><br></span></div>The example code uses only JavaScript implementation shipped with the browser without any external, third-party libraries.<div>  <div>What standard or definition are you relying for the meaning of the term "production-use"? What procedure are you using to determine if code is "production-use" "suitable"? How is that procedure related to "how many async-modules can js-app practically load?"?</div><div><br></div><div><br></div></div></div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Sat, Jun 1, 2019 at 9:42 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">your rollup solution is interesting, but i get an error when run in chrome (i changed to n=20 to prevent name-collision, but it still happens).  don't completely understand how it works, but not sure of suitability for production-use, because of its dynamic <script> tag generation.<div><br></div><div><font face="courier new, monospace">```console</font></div><div><font face="courier new, monospace">ReferenceError: module names ["yeqjqb02mvg3yze26rc5"] are not unique<br>    at data:application/javascript,%0A%20%20%20%20%20%20const%20modules...<br></font></div><div><font face="courier new, monospace">```</font></div></div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Sat, Jun 1, 2019 at 2:33 PM guest271314 <<a href="mailto:guest271314@gmail.com" target="_blank">guest271314@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">Re: how many async-modules can js-app practically load?<div><br></div><div>An example of exporting and importing loading 1000 properties in a single module, where duplicate property names are checked for. Since JavaScript plain objects cannot have duplicate property names there should not be any "collisions"; the code can check for and modify the object to be exported, though the last duplicate property name will be exported without any errors thrown unless the code is composed to throw such an error.</div><div><br></div><div>```</div><div>  (async() => {<br>    const oneThousandModules = encodeURIComponent(<br>      // substitute rand for a Set of module names to be exported<br>      // e.g. const moduleNames = ['moduleA', 'moduleB', ...moduleZ]<br>      `<br>      const modules = {};<br>      // set a function to be exported<br>      modules.fn = function() {return 'a function'};<br>      // function to set (1000) 'random' module names to be exported<br>      const rand = (seed = 'abcdefghijklmnopqrstuvwxyz0123456789', n = 5, len = seed.length) => <br>        '.'.repeat(n).replace(/./g, _ => seed[~~(Math.random() * len)]);<br>        // use Set for unique module identifiers<br>        const moduleNames = [...Array(1000)].map(_ => rand());<br>        const moduleIdentifiers = new Set(moduleNames); <br>        // below line will cause ReferenceError to be thrown<br>        moduleNames.push(moduleNames[0]);<br>        try {<br>          if (moduleIdentifiers.size !== moduleNames.length) {<br>            // check for duplicates<br>            const duplicates = moduleNames.filter((moduleName, index) => moduleNames.indexOf(moduleName) !== index);<br>            // notification of duplicate module names<br>            throw new ReferenceError('module names ' + JSON.stringify(duplicates) + ' are not unique');<br>            // perform the designated task if duplicate module names are found here<br>          }<br>        } catch (e) {<br>          console.error(e);<br>          console.trace();<br>        }<br>        // get, set (sync or async) exported module here <br>        Object.assign(modules, ...[...moduleIdentifiers].map((id, value) => ({[id]:value})));<br>        // since JavaScript plain object cannot have duplicate property names <br>        // modules object will still be exported without duplicate property names<br>        // without collisions<br>        export {modules}<br>    `);<br>    const scriptText = `import {modules} from "data:application/javascript,${oneThousandModules};${encodeURIComponent('console.log(modules);for (const key in modules) {if (typeof modules[key] === \'function\') {console.log(modules[key]());}}')}"`;<br>    const script = document.createElement("script");<br>    script.type = "module";<br>    script.textContent = scriptText;<br>    document.head.appendChild(script);<br>  })();<br></div><div>```</div><div><br></div><div>plnkr <a href="https://plnkr.co/edit/CgEhBY?p=preview" target="_blank">https://plnkr.co/edit/CgEhBY?p=preview</a></div></div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Sat, Jun 1, 2019 at 1:51 AM kai zhu <<a href="mailto:kaizhu256@gmail.com" target="_blank">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><span style="color:rgb(51,51,51);font-family:Georgia,"Times New Roman",Times,serif;font-size:16px">> Place all of the code to be exported in 1 file? </span> <br></div><div> <br></div><div>that obviously will not work, because of module-scope collision.  can anyone share their experience on deploying a [babel-free] pure-es6 application with 20 es-modules rolled-up into one [production] bundle?  is it even possible?</div><div><br></div></div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Fri, May 31, 2019 at 7:55 PM guest271314 <<a href="mailto:guest271314@gmail.com" target="_blank">guest271314@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">> <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" target="_blank">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>
</blockquote></div>
</blockquote></div>
</blockquote></div>
</blockquote></div>