Massive js chunks generated in one page

[swwind]

What version of Remix are you using?

1.3.4

Steps to Reproduce

in app/routes/index.tsx

import { Prism } from "react-syntax-highlighter";
import light from "react-syntax-highlighter/dist/esm/styles/prism/prism";

const code = `fn main() {
  println!("Hello, world!");
}
`;

export default function Index() {
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
      <h1>Welcome to Remix</h1>
      <Prism language="rust" style={light}>{code}</Prism>
    </div>
  );
}

Expected Behavior

Remix build can bundle multiple dependencies into one single (or a few) js chunks.

Actual Behavior

Remix generated almost 300 js chunks, and most of them are only 1~2kb size.

[Jaikant]

@swwind I tried to reproduce the issue, using your code. The files created in public/build were

drwxr-xr-x  755 jai  staff   24160 Apr  8 11:28 _shared
-rw-r--r--    1 jai  staff  124534 Apr  8 11:28 entry.client-E33ZOQLS.js
-rw-r--r--    1 jai  staff   10389 Apr  8 11:28 manifest-F7F35376.js
-rw-r--r--    1 jai  staff     585 Apr  8 11:28 root-4UOYECCD.js
drwxr-xr-x    3 jai  staff      96 Apr  8 11:28 routes

The routes directory also had only a single chunk.

[Jaikant]

@swwind Your issue could be related to #2432

[swwind]

@swwind I tried to reproduce the issue, using your code. The files created in public/build were

drwxr-xr-x  755 jai  staff   24160 Apr  8 11:28 _shared
-rw-r--r--    1 jai  staff  124534 Apr  8 11:28 entry.client-E33ZOQLS.js
-rw-r--r--    1 jai  staff   10389 Apr  8 11:28 manifest-F7F35376.js
-rw-r--r--    1 jai  staff     585 Apr  8 11:28 root-4UOYECCD.js
drwxr-xr-x    3 jai  staff      96 Apr  8 11:28 routes

The routes directory also had only a single chunk.

@Jaikant Most of them located in _shared folder, and was required for page to load.

I created a repo swwind/remix-build-issue for this issue, you can clone and try to build it.

[Jaikant]

@swwind yes, I could see the bunch of files getting created in _shared.
This directory contains the JS chunks generated by esbuild as per this

This issue could be related to evanw/esbuild#1581

[machour]

I don't think this is a bug.

If you want to avoid loading all languages definitions for Prism, just to use a single one, you should lighten your build:
https://github.com/react-syntax-highlighter/react-syntax-highlighter#light-build

Feel free to open a new Proposal if you want to be able to fine-tune default esbuild chunking 🙏🏼