I'm using webpack with .splitEntryChunks() enabled.
I had this crazy idea to split all my logic into separate files:
|utils
|- animations.js
|- controls.js
|- debug.js
|- dialogs.js
|- events.js
|- index.js
|- layout.manager.js
|- regex.js
|- settings.js
|- translator.js
That looks great to me. But now I have a couple of page-specific js files (called managers) that need parts of these utils.
For example:
// /managers/forumManager.js
import Translator from '../utils/translator';
import Controls from '../utils/controls';
import Dialog, { LoadingDialog, Toast } from '../utils/dialogs'
There are more managers that work in a similar way. Now whenever I build my project I end up with some big vendors~*.js files (1~2mb in size).
I can't find a way to reduce the file sizes, so I decided to go for /utils/index.js
as a hub for all utils.
// /utils/index.js
import Translator from './translator';
import Settings from './settings';
import Animations from './animations';
import Events from "./events";
import Controls from './controls';
import Dialogs, { LoadingDialog, Toast } from './dialogs';
import RegexUtils from './regex';
export { Translator, Settings, Animations, Events, Controls, Dialogs, LoadingDialog, Toast, RegexUtils };
But Dialogs
needs access to a couple of utils, so:
// /utils/dialogs.js
import { Translator, RegexUtil, Animation, Events, Controls } from './index';
This reduces the number vendors~*.js
files, but this doesn't feel right.
There's a suggested solution on this site down by Resolving problematic dependencies (passing dependencies via the constructor). But I don't like that idea at all.
I'm hoping someone with a better understanding of ES6 can help me with this