Legacy Markup

[lukeed]

I'm glad the legacy plugin exists! I think it can be improved though.

Here's the bottom of the resulting dist/index.html that is produced:

<script nomodule>!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",(function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()}),!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script>
  <script nomodule src="/assets/polyfills-legacy.1b3a07f4.js"></script>
  <script nomodule id="vite-legacy-entry" data-src="/assets/index-legacy.13201260.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>

1. We don't need the first script. The corresponding script[type=module] is already/always attached, so there's no need for this "let's double-check" script.
2. Vite should log which polyfills are being detected and loaded. With targets: ['defaults', 'not IE 11'], there's a surprising amount of polyfills in there, most of which I think aren't actually needed.
3. (Opinion) Drop SystemJS. There's dimport (mine) and shimport, both of which are significantly smaller than the SystemJS runtime & would allow Vite to output ESM format. Both of these rewrite import, export, and import() statements.

For the last few years, my personal & client projects have been producing a single set of ESM + ES2015 assets, and are attached to two different sets of <script> tags -- has been working well. (Obviously multiple ES-targets is preferred, it's just not something I/we needed, nor something I wanted to configure.)

<script type="module" src="/index.a320aa90.js"></script>
<script nomodule defer src="https://unpkg.com/dimport/nomodule" data-main="/index.a320aa90.js"></script>

---

Related Demo App: /~https://github.com/lukeed/bug-vite-legacy-inline-css

[jonaskuske]

1. We don't need the first script. The corresponding script[type=module] is already/always attached, so there's no need for this "let's double-check" script.

Could you elaborate here? Afaik this script fixes a Safari bug where it'll load both module and nomodule scripts, so we need the beforeload handler to manually stop nomodule scripts from loading – and I assumed loading this script as part of the already-attached module version doesn't work because script[type="module"] always loads async?

[yyx990803]

The first script is to account for Safari 10 which supports <script type="module"> but doesn't support nomodule: https://gist.github.com/samthor/64b114e4a4f539915a95b91ffd340acc

The polyfill detection is indeed a bit aggressive, I'm open to PRs to:

• add an option to log detected polyfills
• improve polyfill detection (it's currently done by running babel preset-env with useBuiltIns : 'usage')

Re SystemJS - we are using the minimal s.js which is 2.8kb gzipped so I'm not sure if size is really a big concern here. My concern of using something like dimport or shimport here is it incurs the need for on-the-fly import rewriting, although I'm not sure how much perf difference it actually entails. Would be interesting to see some data regarding this.

[lukeed]

Right, but Vite could write a simple global variable (if it doesn't already, have to check again) and then thru defer, can short-circuit if the module code has already run. The markup is already in the correct order to support this; see Sam's follow-up comment on the same gist. Both approaches don't/can't prevent Safari from downloading both files.

The size savings also extends to the assets' internals too. With SystemJS, everything is wrapped and compiled different to accommodate the runtime. Eg,

System.register(["./vendor-legacy.14fe4df4.js"],(function(){"use strict";var e,t,Q;return{setters:[function(r){e=r.a,t=r.y,Q=r.N}],execute:function(){...}

//vs

import{a as e,y as Q,N as t}from"./vendor.cc9d1722.js";

The runtime rewrites are fast/not noticeable. I'm sure that between Rich and I, we can find old benchmarks that support this. Was a while ago, and I misplaced/can't recall those numbers atm.