Vue CLI's type checking service ignores memory limits

Question

DevOps has requested that we limit our frontend builds to ~1GB of RAM, so that our Jenkins instance doesn\'t shut down. We use a standard @vue/cli project, with Typ

Answer 1

in vue.config.js

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const os=require('os');
module.exports = {
    //......,
    chainWebpack: config => {
        config
            .plugin('fork-ts-checker')
            .tap(args => {
                let totalmem=Math.floor(os.totalmem()/1024/1024); //get OS mem size
                let allowUseMem= totalmem>2500? 2048:1000;
                // in vue-cli shuld args[0]['typescript'].memoryLimit
                args[0].memoryLimit = allowUseMem;
                return args
            })
    },
   //......
}

Answer 2

in node_modules/fork-ts-checker-webpack-plugin/lib/index.js

declare class ForkTsCheckerWebpackPlugin {
    static readonly DEFAULT_MEMORY_LIMIT = 4096;
    static readonly ONE_CPU = 1;
    static readonly ALL_CPUS: number;
    static readonly ONE_CPU_FREE: number;
    static readonly TWO_CPUS_FREE: number;
    readonly options: Partial<Options>;

Answer 3

I ran into the same issue (although in my case, I wanted to raise the memory limit instead of lower it). I was able to modify the configuration of the ForkTsCheckerWebpackPlugin by customizing Vue CLI's built-in webpack.config:

// in vue.config.js

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = {
  configureWebpack: config => {

    // get a reference to the existing ForkTsCheckerWebpackPlugin
    const existingForkTsChecker = config.plugins.filter(
      p => p instanceof ForkTsCheckerWebpackPlugin,
    )[0];

    // remove the existing ForkTsCheckerWebpackPlugin
    // so that we can replace it with our modified version
    config.plugins = config.plugins.filter(
      p => !(p instanceof ForkTsCheckerWebpackPlugin),
    );

    // copy the options from the original ForkTsCheckerWebpackPlugin
    // instance and add the memoryLimit property
    const forkTsCheckerOptions = existingForkTsChecker.options;
    forkTsCheckerOptions.memoryLimit = 8192;

    config.plugins.push(new ForkTsCheckerWebpackPlugin(forkTsCheckerOptions));
  },
};

Now when I run my build, I see this in my output:

-  Building for production...
Starting type checking service...
Using 1 worker with 8192MB memory limit

More info on the configureWebpack option here: https://cli.vuejs.org/config/#configurewebpack

To see the default Webpack configuration used by the Vue CLI, you can inspect it by running vue inspect: https://cli.vuejs.org/guide/webpack.html#inspecting-the-project-s-webpack-config