我正在将我的 Laravel 8 项目从 Vue 2 和 Laravel Mix 5 更新到 Vue 3 和 Laravel Mix 6，我注意到修改组件时的重新编译时间明显长于 Mix 5。

升级前

{
    "laravel-mix": "^5.0.1","vue": "^2.5.17","vue-template-compiler": "^2.6.10"
}

升级前，我的 app.js 和 webpack.mix.js 文件看起来像这样，运行 yarn run hot 时重新编译时间约为 100 毫秒。

// package.json
{
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js"
}

// app.js
window.Vue = require('vue');

// Register Components
Vue.component('my-component',() => import(/* webpackPrefetch: true */ './MyComponent'));
Vue.component('my-component',() => import(/* webpackPrefetch: true */ './MyComponent'));
// ... There are around 100 components loaded here
new Vue({
  el: '#app',});

// webpack.mix.js
const mix = require('laravel-mix');
mix.js('resources/js/app.js','public/js');

升级后

{
    "vue": "^3.1.5","vue-loader": "^16.3.3","laravel-mix": "^6.0.27"
}

Mix 和 Vue 升级完成后，运行 yarn run hot 看到重新编译时间约为 2-3 秒，这是一个巨大的性能损失。

// package.json
"hot": "mix watch --hot",

// app.js
const app = createApp({});

// Register Components
app.component('my-component',defineAsyncComponent(() => import(/* webpackPrefetch: true */ './MyComponent')));
app.component('my-component',defineAsyncComponent(() => import(/* webpackPrefetch: true */ './MyComponent')));
// ... There are around 100 components loaded here

app.mount('#app');

// webpack.mix.js
const mix = require('laravel-mix');
mix.js('resources/js/app.js','public/js').vue();

我已将范围缩小到 app.js 文件中组件的绝对数量（升级前这不是问题）。如果我使用 Mix 6 减少 app.js 中注册的组件数量，重新编译时间会显着减少。当只有一个组件发生变化时，它似乎正在重新编译所有组件，这不是之前配置的行为。