移动到Laravel v6 & Vue 3时，手表编译时间大幅增加

Question

编辑：

在6个月后再次尝试解决这一问题之后，我们将获得更多的信息：

• 我现在正在Storybook中开发我的Vue组件，它还监视和重新加载对我的组件的更改。在我使用yarn hot应用程序的前1-2秒，故事簿中几乎会出现更改。
• 由于"mix --production"错误，我的CI/CD管道无法构建生产生成( Allocation failed - JavaScript heap out of memory )。我增加了构建服务器上的物理内存量，但是在Mix 5和Mix 6之间确实发生了一些变化，这可能与这个问题有关。

原始问题

我正在更新我的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 my。

// 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'));
Vue.component('my-component', () => import(/* webpackPrefetch: true */ './MyComponent'));
Vue.component('my-component', () => import(/* webpackPrefetch: true */ './MyComponent'));
Vue.component('my-component', () => import(/* webpackPrefetch: true */ './MyComponent'));
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')));
app.component('my-component', defineAsyncComponent(() => import(/* webpackPrefetch: true */ './MyComponent')));
app.component('my-component', defineAsyncComponent(() => import(/* webpackPrefetch: true */ './MyComponent')));
app.component('my-component', defineAsyncComponent(() => import(/* webpackPrefetch: true */ './MyComponent')));
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中注册的组件的数量，那么重新编译的时间就会大大减少。它似乎是重新编译所有的组件时，其中只有一个改变，这不是以前的配置的行为。

Answer 1

你遵循了拉力维尔混合5到6升级指南？中的步骤吗？

vue函数mix.vue()已经添加到v6中，您还可以使用提取函数mix.extract()提取供应商库，以提高编译性能。