Chunk file Issues when using load balancers and Webpack

[cuartas1515]

I'll share my whole webpack.config.js file shortly, my issue is this:
We have a server and a mirror server that serves as a load balancer, in both servers we run npm run production to compile the code and such, the issue is, that doing it in chunks brings the issue that in one server a chunk file named 1560.js is 1496.js in the other server, so in cases where the balancer is used in the middle of merging the chunks, the first server instruct to merge certain named files that won't find in the other server so I get the error:

Uncaught (in promise) ChunkLoadError: Loading chunk xxxx failed

I don't want to get rid of chunk merging because it's gonna take an eternity to build otherwise, I'm not too versed on webpack, just made this to make Vue work with codeigniter 3 but I'm pretty sure there's a lot of fixes and optimizations I can do here.

Speaking of optimizations, npm run build takes 2.5 minutes in my machine the first run, even more for my team depending on how fast the machine and drive are, and npm run production takes up to 20 freaking minutes on the servers, so yeah, I really need to find out how to speed up this. Hopefully someone can help me out with this.

Thanks in advance!

This is the webpack.config.js file:

// webpack.config.js
const { VueLoaderPlugin } = require('vue-loader')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const TerserPlugin = require('terser-webpack-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const swc = require('@swc/core');

let glob = require('glob')
let path = require('path')

var entries = {}
glob.sync('./application/packages/**/views/**/js/*.js').reduce(function(obj, el) {
  entries[path.parse(el).name] = el;
}, {})
glob.sync('./application/views/**/js/*.js').reduce(function(obj, el) {
  entries[path.parse(el).name] = el;
}, {})

module.exports = {
  watchOptions: {
    ignored: ['**/node_modules', '**/assets/static-generated'],
  },
  entry: entries,
  output: {
    path: path.resolve(__dirname, './assets/static-generated/js'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // this will apply to both plain `.js` files
      // AND `<script>` blocks in `.vue` files
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: '/node_modules/'
      },
      // this will apply to both plain `.css` files
      // AND `<style>` blocks in `.vue` files
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'resolve-url-loader',
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      },
      {
        test: /\.svg$/,
        type: 'asset/resource',
        generator: {
          filename: '../icons/[hash][ext][query]'
        }
      }
    ]
  },
  plugins: [
    // make sure to include the plugin for the magic
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({
      filename: '../css/[name].css',
      chunkFilename: '../css/[id].css'
    }),
    // process.env.NODE_ENV === 'development' ? new BundleAnalyzerPlugin() : false
  ],
  resolve: {
    alias: {
      vue: process.env.NODE_ENV === 'development' ? 'vue/dist/vue.js' : 'vue/dist/vue.min.js',
      '@': path.resolve(__dirname, 'assets/js')
    }
  },
  optimization: {
    minimize: process.env.NODE_ENV === 'development' ? false : true,
    minimizer: [
      new TerserPlugin({
        extractComments: false,
        minify: TerserPlugin.swcMinify,
        terserOptions: {
          compress: {},
          mangle: true,
          toplevel: true,
          format: {
            comments: false,
          },
        },
      }),
      new CssMinimizerPlugin({
        minimizerOptions: {
          level: {
            1: {
              roundingPrecision: "all=3,px=5",
            },
          },
        },
        minify: CssMinimizerPlugin.cleanCssMinify,
      })
    ]
  }
}