Vue CLI 的类型检查服务忽略内存限制 [英] Vue CLI's type checking service ignores memory limits

问题描述

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

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 TypeScript. However, the TS type checking service ignores all attempts to limit its memory usage, which is always 2048 MB.

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

I've tried disabling it and relying on fork-ts-checker-webpack-plugin but that introduces other problems.

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

Based on what I found, this should work:

$ 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 的限制开始.

Note that I've no idea how these memory limits work, as I have limited awareness of Node's internals. But despite these, the type checking service always starts with a 2048 MB limit.

我不确定这是否是 Vue CLI 如何配置 Webpack/TS 的特定问题.

I'm not sure if it's a problem specific to how Vue CLI configures Webpack/TS.

推荐答案

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

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

有关 configureWebpack 选项的更多信息，请访问:https://cli.vuejs.org/config/#configurewebpack

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

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

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

这篇关于Vue CLI 的类型检查服务忽略内存限制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！