Usamos vue-loader (generalmente junto con el html-webpack-plugin, pero lo omito a continuación porque no es la parte importante) para transpilar múltiples aplicaciones basadas en vue dentro de un solo proyecto. La configuración de nuestro paquete web se parece un poco a lo siguiente:
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() ], ... })Entonces, por ejemplo, app-1.html tiene un div con id app , al que se hace referencia en app-1.js :
import Vue from 'vue' import App1 from './app-1.vue' ... new Vue({...}).$mount('#app')Esto significa que nuestra estructura de directorios (muy simplificada) se parece a lo siguiente:
Ahora, aquí está nuestro problema: notamos un consumo de memoria muy alto, que aumenta drásticamente cuantas más aplicaciones tenemos en nuestra matriz de aplicaciones . Esto es algo así como > 10 GB para un proyecto que contiene 8 de estas aplicaciones.
¿Podría ser algo así como una fuga de memoria en el vue-loader o estamos haciendo un mal uso del complemento? Estamos usando la versión 15.10.0 de vue-loader.
Parece que vue-loader no fue el culpable. Puedo reproducir el mismo alto consumo de memoria cuando elimino el vue-loader por completo y no uso ningún complemento. Parece que el complemento terser (que utiliza automáticamente el paquete web) es el que consume tanta memoria (ver también https://github.com/webpack/webpack/issues/13550 ). Por defecto, terser genera muchos hilos. Uno puede controlar este comportamiento:
const TerserPlugin = require("terser-webpack-plugin") ... module.exports = { ... optimization: { minimize: true, minimizer: [ new TerserPlugin({ parallel: 2, }) ] } }La solución alternativa sería usar otro minimizador, por ejemplo, esbuild-loader.