Vue CLI 的类型检查服务忽略了内存限制

Posted 2023-02-23

【中文标题】Vue CLI 的类型检查服务忽略了内存限制

【英文标题】：Vue CLI's type checking service ignores memory limits

【发布时间】：2019-08-11 00:06:58

【问题描述】：

DevOps 要求我们将前端构建限制为 ~1GB RAM，这样我们的 Jenkins 实例就不会关闭。我们使用带有 TypeScript 的标准 @vue/cli 项目。但是，TS 类型检查服务会忽略所有限制其内存使用量的尝试，该内存使用量始终为 2048 MB。

我尝试禁用它并依赖fork-ts-checker-webpack-plugin，但这会带来其他问题。

根据我的发现，这应该可行：

$ NODE_OPTIONS=--max_old_space_size=1024 \
    NODE_ENV=production \
    node \
    --max_old_space_size=1024 \
    --max-old-space-size=1024 \
    node_modules/.bin/vue-cli-service build

请注意，我不知道这些内存限制是如何工作的，因为我对 Node 的内部结构了解有限。但尽管如此，类型检查服务始终以 2048 MB 的限制开始。

我不确定这是否是特定于 Vue CLI 配置 Webpack/TS 的问题。

【参考方案1】：

我遇到了同样的问题（尽管在我的情况下，我想提高内存限制而不是降低它）。我可以通过自定义 Vue CLI 的内置 webpack.config 来修改 ForkTsCheckerWebpackPlugin 的配置：

// 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));
  ,
;

现在，当我运行构建时，我在输出中看到了这一点：

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

更多关于configureWebpack选项的信息在这里：https://cli.vuejs.org/config/#configurewebpack

要查看 Vue CLI 使用的默认 Webpack 配置，您可以通过运行 vue inspect 来检查它： https://cli.vuejs.org/guide/webpack.html#inspecting-the-project-s-webpack-config

【讨论】：

感谢您的提示。我不再在同一个地方工作，所以我无法检查您的解决方案是否正确，但似乎是这样！

【参考方案2】：

在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
            )
    ,
   //......

【讨论】：

这个解决方案对我有用。为了清楚起见，我项目中的这段代码前面是configureWebpack,

【参考方案3】：

在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>;