使用vue加载程序构建多个vue应用程序时，内存消耗非常高

Question

我们使用vue加载器(通常与html webpack插件一起使用，但我在下面省略了这一点，因为它不是重要的部分(在单个项目中传输多个基于vue的应用程序。我们的webpack配置看起来有点像以下内容：

const apps = [
{ html: 'app-1', js: 'app-1' },
{ html: 'app-2', js: 'app-2' },
...
]
module.exports = (_a, _b) =>({
entry: Object.fromEntries(apps.map(app => [app.js, './src/${app.js}.js'])),
...
plugins: [
new VueLoaderPlugin()
],
...
})

例如，app-1.html有一个id为app的div，该div在app-1.js:中被引用

import Vue from 'vue'
import App1 from './app-1.vue'
...
new Vue({...}).$mount('#app')

这意味着我们的目录结构(非常简化(如下所示：

• src
  • app-1.html
  • app-1.js
  • app-1.vue
  • app-2.html
  • app-2.js
  • app-2.vue
• package.json
• webpack.config.js

现在我们的问题是：我们注意到内存消耗非常高，应用程序阵列中的应用程序越多，内存消耗就会急剧增加。这类似于>10 GB用于包含其中8个应用程序的项目。

这可能是vue加载程序中的内存泄漏，还是我们滥用了插件？我们使用的是版本15.10.0的vue加载程序。

Answer 1

似乎vue-loader不是罪魁祸首。当我完全删除vue加载程序并且完全不使用任何插件时，我可以重现同样高的内存消耗。看起来简洁的插件(它被webpack自动使用(是一个占用了那么多内存的插件(另请参阅https://github.com/webpack/webpack/issues/13550)。默认情况下，简洁会生成大量线程。可以控制这种行为：

const TerserPlugin = require("terser-webpack-plugin")
...
module.exports = {
...
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
parallel: 2,
})
]
}
}

另一种解决方案是使用另一个最小化器，例如esbuildloader。