lisonge / vite-plugin-monkey

A vite plugin server and build your.user.js for userscript engine like Tampermonkey, Violentmonkey, Greasemonkey, ScriptCat
MIT License
1.33k stars 70 forks source link

Turn off System.fetch for SystemJS await dynamic imports? #178

Open blakehurd opened 1 month ago

blakehurd commented 1 month ago

Same "issue" as the CSS flavor of the issue, except CSS can be flagged with ?inline to skip the issue (as you noted). The issue is unnecessary fetch() calls that consistently fail to load the registered ".js" keys and unnecessary error logs, while the provided javascript is loaded in properly.

I'm using an inline inject of SystemJS, but it doesn't look like I can override System.shouldFetch (unless I forked the plugin which I'd rather not do). Any thoughts on how to avoid these errors?

lisonge commented 1 month ago

Since your build output is just a single file, I suggest that any side effects in your code should not be placed in the module scope but rather in the function scope within JavaScript. This way, the user can control it by manually calling the functions. In summary, avoid using dynamic modules and use functions instead

blakehurd commented 1 month ago

The dynamic imports are on modules loaded from npm, using a vite mode flag to decide whether it is imported. Done in this manner, the userscript is (intentionally) larger when the mode flag is on, and smaller when the mode flag is off (no dynamic module is imported).

What I'm asking about seems to be an issue in how SystemJS is invoked -- it shouldn't have to load the module via fetch when it already has the javascript itself available to load in?

lisonge commented 1 month ago

The dynamic imports are on modules loaded from npm

what is the package name and example code ?

blakehurd commented 1 month ago

I'll see about providing a small example when I have a moment.

effectively:

  1. take a dependency on any npm package. For my case, it was TomSelect
  2. use a vite build env flag (https://vitejs.dev/guide/env-and-mode) to selectively dynamic import the npm package, e.g. TomSelect in (1).
  3. Observe that when the flag is on, the userscript provided will import TomSelect and when the flag is off, the userscript will not import TomSelect (saving space). We can call these script modes A and B respectively.

When A is installed and TomSelect is imported, there will be fetch() attempts and failures for the entry point .js and TomSelect (or any other NPM module loaded in this way), but the javascript will still be loaded in and work correctly. The error logs add noise, and the network calls create unnecessary traffic to the origin the userscript is running on.

When B is installed, there's no dynamic imports active, so SystemJS isn't loaded in, and no entry point .js is created or npm module .js. There's no faulty fetch() calls or error logs in this situation.

blakehurd commented 1 month ago

I would expect your playground example https://github.com/lisonge/vite-plugin-monkey/blob/main/playground/dynamic-import/src/main.ts to show the same error logs and faulty fetch attempts.