Long delay when importing a 5MB file

Describe the bug

I experience a longer delay than expected when loading a file using a JavaScript import :

const start = performance.now()

import data from "5mb-file.json"

const end = performance.now()
console.log(`Delay : ${end-start}ms`) // about 5s

The ~5s delay seems unreasonnable considering the size of the file.

For comparaison using JSON.parse and fs.readFileSync on the exact same file, I’m able to retreive the data in about ~0.1s.

Reproduction

https://github.com/mquandalle/large-import-delay-vitejs-repro

The reproduction contains 2 server-side endpoints showcasing the two import methods (ES module or JSON.parse/fs.readFileSync), and a minimal UI to explain the issue a bit more.

Logs

No response

System Info

System:
    OS: Linux 5.13 Pop!_OS 21.04
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
    Memory: 1.63 GB / 15.40 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 16.11.0 - ~/.nvm/versions/node/v16.11.0/bin/node
    Yarn: 1.22.15 - ~/.nvm/versions/node/v16.11.0/bin/yarn
    npm: 8.0.0 - ~/.nvm/versions/node/v16.11.0/bin/npm
  Browsers:
    Brave Browser: 96.1.32.113
    Firefox: 94.0

Severity

serious, but I can work around it

Additional Information

This issue occurs both on development mode and when the app is deployed and the import called for the first time (example: cold starts on Vercel lambdas)

[bluwy]

I’ve checked the repro out today, filed an issue with Vite at https://github.com/vitejs/vite/issues/6154. It’s because Vite has special transforms for JS files during dev mode for HMR, which impacted the loading time for this. However, I don’t think JSON files should be impacted by this, since it’s just JSON (perhaps I’m wrong but we’ll see). Thanks for making a comprehensive repro btw! I’ll close this and track the progress over at Vite.

[mquandalle]

The issue seems to only happen in dev mode, not in production or preview.

So it’s probably related to Vite processing the import in dev mode.They may be way to opt-out from that behaviour, but I was unlucky with vite.optimizeDeps.exclude.