Weird Laravel Mix Webpack Chunkname with 2 files combined

Question

I'm using Laravel Mix with webpack to compile vue. I'm changing the routes to use dynamic import because the production app.js is almost 3MB. In the middle of doing that, I noticed this weird behavior.

There are some generated javascript with weird name, the name is a combination of 2 different vue component.

This is my webpack.mix.js

const mix = require('laravel-mix')

mix.js('resources/js/app.js', 'public/js')
  .sass('resources/sass/app.scss', 'public/css')

if (mix.inProduction()) {
  mix.version()
}

mix.webpackConfig({
  entry: {
    main: ['./resources/sass/app.scss'],
  },
  output: {
    chunkFilename : 'js/[name].js',
  },
})

This is my route, nothing particular here

export default [
  {
    path      : 'product/component/:id',
    name      : 'product.component.show',
    component : () => import(/* webpackChunkName: "product-component-show" */ '../../pages/product/component/show'),
  },
  {
    path      : 'product/diesel/combination/:id',
    name      : 'product.diesel.formula.show',
    component : () => import(/* webpackChunkName: "product-formula-show" */ '../../pages/product/diesel/formula/show'),
  },
  {
    path      : 'product/diesel/:id',
    name      : 'product.diesel.show',
    component : () => import(/* webpackChunkName: "product-diesel-show" */ '../../pages/product/diesel/show'),
  },
  // other routes...
]

Program works normally without error. I'm just wondering why there are these weird files. Before I use dynamic import in product routes, it happened to customer-show route, but as I changed more routes to use dynamic import, the weird customer-show js disappeared.

FYI, I'm using laravel v6.12, tried upgrading to laravel v7 but it's the same. Rolled back to laravel v6 because weird behavior in new phpunit breaks some of my tests. The laravel-mix is v4.1.4