How to "minify" design-system.bundle.js so dashboard doesn't take 20 seconds to load.

[CodahWasTaken]

I'm facing an issue when I connect to my adminjs panel remotely:

When I go to my adminjs panel URL it takes 20 seconds to load the login page and sometimes it takes even more.

For some reason "design-system.bundle.js" from frontend/assets/ is 35,86 MB.

I know that there is already a closed issue related to this but that answer didn't work for me.

I have already tried adding this piece of code inside my start function in app.js:

process.env.NODE_ENV = 'production';
    process.env.ADMIN_JS_SKIP_BUNDLE= true;

    const admin = new AdminJS(AdminJSOptions)

    if (process.env.NODE_ENV === 'production') {
        await admin.initialize();
    }
    else {
        admin.watch();
    }

but nothing changes, load time is the same.

Also, when I go to (myurl)/frontend/assets/design-system.bundle.js I can see that the file is huge and it is not bundled or minified.

How can I make this work so it takes less time and uses less data or how can I bundle that giant js file?

Thanks!

[dziraf]

The bundles are minified only if your NODE_ENV is production.

Nevertheless, design system bundle is still huge. I've recently done some changes which reduce the production bundle size from 6-7MB to 2-3MB but that's still big. The size comes from @carbon/icons-react library, otherwise design system would probably be around 500KB. I plan to either remove Icon component from the design system or rewrite it so that it's only a wrapper around any other icon library you choose but this will be a breaking change so we're waiting for more changes to push alongside it.

A production workaround would be to add versioning to your bundles, this way you could use your CDN to cache *.bundle.js files using their names. @adminjs/bundler allows you to pre-bundle AdminJS browser bundles and place them in one directory of your choice. If you specifiy versioning#manifestPath option, it will also automatically version your bundles and create an assets manifest JSON which you can use in AdminJSOptions#assets#coreScripts.

[CodahWasTaken]

Hello dziraf! Thanks for answering.

I already saw in another similar issue that you answered that I should set NODE_ENV to "production" so the bundle gets minified.

The problem is that I already set process.env.NODE_ENV = 'production'; before creating the adminjs object but it stills doesn't get minified.

Am I doing it wrong by adding that line in the app.js code before creating adminjs? If yes, where should I set that enviroment variable instead? (I'm testing in a Windows enviroment).

[dziraf]

I would suggest setting NODE_ENV before starting your app: https://stackoverflow.com/questions/9249830/how-can-i-set-node-env-production-on-windows

The minified and development bundles of global.bundle.js, app.bundle.js and design-system.bundle.js are all included in the packages you install and the propert bundle is selected on route/endpoint level based on NODE_ENV so I'm not sure if other files see NODE_ENV as production if you just assign it in one file.