laravel - 奇怪的 Laravel Mix Webpack Chunkname 与 2 个文件组合

Question

我正在使用 Laravel Mix 和 webpack 来编译 vue。我正在更改使用动态导入的路线，因为生产 app.js 几乎是 3MB。在这样做的过程中，我注意到了这种奇怪的行为。

有一些生成的 javascript 名称很奇怪，名称是 2 个不同的 vue 组件的组合。

这是我的 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',
  },
})

这是我的路线，这里没什么特别的

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...
]

程序正常运行，没有错误。我只是想知道为什么会有这些奇怪的文件。在我在产品路由中使用动态导入之前，发生过customer-show路由，但是当我更改更多路由使用动态导入时，奇怪的customer-show js消失了。

仅供参考，我使用的是 laravel v6.12，尝试升级到 laravel v7，但它是一样的。回滚到 laravel v6，因为新 phpunit 中的奇怪行为破坏了我的一些测试。laravel-mix 是 v4.1.4

标签： laravelwebpacklaravel-mixwebpack-mix