Bundle size too large, takes 30s to load.

[Stupidism]

Link to reproduction

Not for now

To Reproduce

Check the bundle size of the web app

Describe the Bug

Bundle just too large. takes 30s to load

Payload Version

1.9.5

[jmikrut]

Hey @Stupidism, this is not an issue with Payload.

It's because you're running in dev mode and not production. In dev mode, Webpack does not optimize your JS bundle for filesize and it loads up your code with sourcemaps, hot module reloading, and lots more.

Running in production, Payload is already quite well-optimized coming in at around ~660kb.

Make sure you are running production with NODE_ENV=production.

[Stupidism]

@jmikrut I tried, but it's still 34.5MB with NODE_ENV=production;

Here is my webpack config for build:

console.log('process.env.NODE_ENV', process.env.NODE_ENV);

module.exports = (config, _context) => {
  return {
    ...config,
    entry: {
      ...config.entry,
      config: './apps/seo-submodule/seo-payload/src/payload.config.ts',
    },
    output: {
      ...config.output,
      filename: '[name].js',
    },
  };
};

Here is the running result:

NODE_ENV=production nx run seo-payload:build:stage

 >  NX   USING REMOTE CACHE

> nx run seo-payload:build:stage

process.env.NODE_ENV production

Here's the webpack config for admin:

import path from 'path';

import _ from 'lodash';

export const adminWebpackConfig = (config) => {
  console.log('adminWebpackConfig', process.env.NODE_ENV);

  return _.merge({}, config, {
    // Uncomment this to write code to patch-package payload, otherwise everything is cached
    // cache: false,
    resolve: {
      alias: {
        react: path.resolve(__dirname, '../../../../node_modules/payload/node_modules/react'),
        'react-dom': path.resolve(__dirname, '../../../../node_modules/payload/node_modules/react-dom'),
        bull: path.resolve(__dirname, '../../../../apps/seo-submodule/seo-payload/src/mocks/client-side-bull-mock.ts'),
      },
    },
  });
};

It's used in the payload config:

import { adminWebpackConfig } from './adminWebpackConfig';

admin: {
    webpack: adminWebpackConfig,
}

Here's the result of this:

npx dotenv -e apps/seo-submodule/seo-payload/.env -- node dist/apps/seo-submodule/seo-payload/main.js
body-parser deprecated undefined extended: provide extended option dist/apps/seo-submodule/seo-payload/main.js:1:75444
[04:42:16] INFO (payload): Starting Payload...
adminWebpackConfig production
[04:42:21] INFO (payload): Payload Admin URL: https://seo-payload.stage.getjerry.com/admin

Is there any explicit option I can turn on to disable dev mode?

[JarrodMFlesch]

I am not sure exactly what is going on, but I do know that setting NODE_ENV=production will opt out of webpack entirely as you can see here.

Setting NODE_ENV=production is how you opt out of webpack. You should see the bundle size drastically decrease and the webpack hmr should not show in your network panel.

[github-actions[bot]]

This issue has been automatically locked. Please open a new issue if this issue persists with any additional detail.