Open Bug 1840284 Opened 2 years ago Updated 1 year ago

Slow load with high number of JS requests

Categories

(Core :: JavaScript Engine, enhancement, P3)

Product:
Core
Component:
JavaScript Engine
Version:
Firefox 114
Type:
enhancement

Tracking

()

Status:
UNCONFIRMED

People

(Reporter: arnaud.barre72, Unassigned)

References

(Blocks 1 open bug)

Details

Steps to reproduce:

https://github.com/ArnaudBarre/vite-slow-devtools

In short: have a vite dev server serving 3 thousand small JS files

Actual results:

The page is very slow to load compare to Chrome&Safari.

I noticed that while reporting the issue about the lag in the Chome devtools: https://bugs.chromium.org/p/chromium/issues/detail?id=1457783

Maybe this is due to having all imports in the same file (not common even in big apps). On a small/medium Vite app size, I never noticed that firefox was slower

Expected results:

The page should load of JS files over localhost should be a lot faster.

While this problem should not arise in production application, this can happen in development with tools like Vite. This is currently a blocker for people with big application (>2k JS files) trying to migrate from Webpack to Vite.

The Bugbug bot thinks this bug should belong to the 'Core::JavaScript Engine' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Component: Untriaged → JavaScript Engine
Product: Firefox → Core

(In reply to Arnaud Barré from comment #0)

Steps to reproduce:

https://github.com/ArnaudBarre/vite-slow-devtools

This link shows a 404 error on github for me.
The linked Chromium bug (https://bugs.chromium.org/p/chromium/issues/detail?id=1447912#c3) has another test-URL (https://simonsiefke.github.io/chrome-issue-1447912/) that loads 1000 CSS files. That takes a while to load : https://share.firefox.dev/3PqbBsB

@Arnaud: Can you fix the test page link (https://github.com/ArnaudBarre/vite-slow-devtools) ?

Flags: needinfo?(arnaud.barre72)

Sorry I updated the visibility of the repo

Flags: needinfo?(arnaud.barre72)

Here's a profile:

https://share.firefox.dev/3PzAz94

Jon: This seems to be triggering some sort of algorithmic pathology.

I was able to reproduce locally by

  1. Cloning linked repo
  2. Installing dependencies with npm install --local
  3. Generating with node generate.js
  4. Serving with npm exec vite dev

Briefly looking at the code, it seems like this is a big file with 3k import * from x.js statements, where each x.js simply exports a constant.

Flags: needinfo?(jcoppeard)
See Also: → 1840656

I can reproduce this. It looks like some quadratic behaviour is happening with us repeatedly calling the module resolve hook.

It's possible that the modules refactoring work will help here.

Blocks: sm-js-perf
Severity: -- → N/A
Flags: needinfo?(jcoppeard)
Priority: -- → P3
You need to log in before you can comment on or make changes to this bug.