[Bug] loadAndCacheImage slows down 8 times after build React app with Vite

[MustafaEminn]

Describe the Bug

Loading and caching 8MB MG image takes 1 second when I'm running application on my local. But same images takes 8 seconds after I built my application. I'm only using local file system not using WADORS.

vite.config.ts:

import { viteCommonjs } from '@originjs/vite-plugin-commonjs';

export default defineConfig({
  build: {
    assetsDir: 'static',
    rollupOptions: {
      context: 'window',
      moduleContext: (id) => {
        if (id.includes('pdfmake/build/vfs_fonts.js')) {
          return 'window';
        }
      },
    },
  },
  css: {
    modules: {
      generateScopedName: '[name]_[local]_[hash:base64:5]',
    },
  },
  worker: {
    format: 'es',
    rollupOptions: {
      external: ['@icr/polyseg-wasm'],
    },
  },
  optimizeDeps: {
    exclude: ['@cornerstonejs/dicom-image-loader'],
    include: ['dicom-parser'],
  },
  plugins: [
    react(),
    viteCommonjs(),
    // compression({ deleteOriginalAssets: true })
  ],
});

package.json:

    "@cornerstonejs/core": "^2.18.8",
    "@cornerstonejs/dicom-image-loader": "^2.18.8",
    "@cornerstonejs/nifti-volume-loader": "^2.18.8",
    "@cornerstonejs/tools": "^2.18.8",

Steps to Reproduce

1. Use local file system
2. Build react app with vite
3. try to open a dicom image in STACK type

The current behavior

It is very slow compared to unbundled version.

The expected behavior

It would be same as unbundled version

OS

Windows 10

Node version

20.11.0

Browser

Chrome latest

[sedghi]

Hmmm, how much of it is request over network?

[MustafaEminn]

Hmmm, how much of it is request over network?

There is no request over network. Every data coming from SSD or RAM. I have debugged the problem. The time consuming part is @cornerstonejs\dicom-image-loader\dist\esm\imageLoader\createImage.js createImage function.

I'm also getting warning messages during build.

[plugin:vite:resolve] [plugin vite:resolve] Module "fs" has been externalized for browser compatibility, imported by "node_modules/@cornerstonejs/codec-libjpeg-turbo-8bit/dist/libjpegturbowasm_decode.js". See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] [plugin vite:resolve] Module "path" has been externalized for browser compatibility, imported by "node_modules/@cornerstonejs/codec-libjpeg-turbo-8bit/dist/libjpegturbowasm_decode.js". See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] [plugin vite:resolve] Module "fs" has been externalized for browser compatibility, imported by "node_modules/@cornerstonejs/codec-charls/dist/charlswasm_decode.js". See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] [plugin vite:resolve] Module "path" has been externalized for browser compatibility, imported by "node_modules/@cornerstonejs/codec-charls/dist/charlswasm_decode.js". See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] [plugin vite:resolve] Module "fs" has been externalized for browser compatibility, imported by "node_modules/@cornerstonejs/codec-openjph/dist/openjphjs.js". See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] [plugin vite:resolve] Module "path" has been externalized for browser compatibility, imported by "node_modules/@cornerstonejs/codec-openjph/dist/openjphjs.js". See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] [plugin vite:resolve] Module "fs" has been externalized for browser compatibility, imported by "node_modules/@cornerstonejs/codec-openjpeg/dist/openjpegwasm_decode.js". See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] [plugin vite:resolve] Module "path" has been externalized for browser compatibility, imported by "node_modules/@cornerstonejs/codec-openjpeg/dist/openjpegwasm_decode.js". See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] [plugin vite:resolve] Module "fs" has been externalized for browser compatibility, imported by "node_modules/@cornerstonejs/codec-libjpeg-turbo-8bit/dist/libjpegturbowasm_decode.js". See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] [plugin vite:resolve] Module "path" has been externalized for browser compatibility, imported by "node_modules/@cornerstonejs/codec-libjpeg-turbo-8bit/dist/libjpegturbowasm_decode.js". See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] [plugin vite:resolve] Module "fs" has been externalized for browser compatibility, imported by "node_modules/@cornerstonejs/codec-openjpeg/dist/openjpegwasm_decode.js". See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] [plugin vite:resolve] Module "path" has been externalized for browser compatibility, imported by "node_modules/@cornerstonejs/codec-openjpeg/dist/openjpegwasm_decode.js". See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] [plugin vite:resolve] Module "fs" has been externalized for browser compatibility, imported by "node_modules/@cornerstonejs/codec-charls/dist/charlswasm_decode.js". See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] [plugin vite:resolve] Module "path" has been externalized for browser compatibility, imported by "node_modules/@cornerstonejs/codec-charls/dist/charlswasm_decode.js". See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] [plugin vite:resolve] Module "fs" has been externalized for browser compatibility, imported by "node_modules/@cornerstonejs/codec-openjph/dist/openjphjs.js". See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] [plugin vite:resolve] Module "path" has been externalized for browser compatibility, imported by "node_modules/@cornerstonejs/codec-openjph/dist/openjphjs.js". See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.

[sedghi]

Have you seen our demo? does it happen in ours too? https://github.com/cornerstonejs/vue-cornerstone3d

[MustafaEminn]

It took same time with bundled and unbundled version. I converted viewport to stack viewport and both of the versions took 2000ms+-. I'm using React with Vite. Why it is happening on my side?

I got same warning messages in vue project as well.

[sedghi]

Can you share a minimal repository to reproduce the issue, including anonymized data and instructions on how to host it, such as the type of server to use, e.g., orthanc? dcm4chee? etc

[MustafaEminn]

I'm not using any server. I'm getting dicom file from file input at client side.
I provided repository below. Also here I provided a dicom file to reproduce problem. This issue appears for all dicom files.

There is a file input in the page, please select the dicom file. When you select file the website will show alert at the top after loadAndCacheImage finished.

The important point is we need to compare bundled and dev mode application run time.

Bundled project can run with live-server library.

npm install -g live-server
live-server ./dist

MG_DICOM_EXAMPLE.zip

https://github.com/MustafaEminn/loadAndCacheImageReproduce

[sedghi]

this does not work https://github.com/MustafaEminn/loadAndCacheImageReproduce

[MustafaEminn]

Sorry. Here is the correct one

https://github.com/MustafaEminn/loadAndCacheImageReproduce

[MustafaEminn]

I found why it is happening. Something happens during Vite bundling the jpeg-lossless-decoder-js library.
When I have updated the dynamic import from:
import('jpeg-lossless-decoder-js')

To:
import('https://cdn.jsdelivr.net/npm/[email protected]/+esm')

It fixed the issue. I don't know what Vite is doing during bundling.