Seperate modes into chunks

[Abooddy]

I have:

import "ace-builds/src-noconflict/mode-json";
import "ace-builds/src-noconflict/mode-xml";
import "ace-builds/src-noconflict/mode-sql";
import "ace-builds/src-noconflict/mode-html";
import "ace-builds/src-noconflict/mode-css";
import "ace-builds/src-noconflict/mode-javascript";
import "ace-builds/src-noconflict/mode-yaml";
import "ace-builds/src-noconflict/theme-xcode";

I'm using Next.js as my React framework and it bundles all these into a single chunk:

mode-html is 59.07 KB.
mode-json is 5.16 KB.

My problem is that why load all other modes when the needed is only mode-json?

I tried many things for the past 24 hours, but nothing succeeded. Dynamically loading the mode will give the "ace is undefined error" as they need the editor to be imported first.

Is there any way to split each mode into a separate chunk and load it when needed?

Appreciate your help!