Webpack模块联邦GitLab内存构建

Question

我正在努力使我的webpack的SPA与模块联盟的gitlab生产形象建设。它在构建阶段失败了，如下所示：

<--- Last few GCs --->
[16:0x7f50fd1533b0]   388576 ms: Mark-sweep 1820.0 (1888.8) -> 1805.4 (1890.6) MB, 5141.7 / 0.0 ms  (average mu = 0.112, current mu = 0.056) allocation failure scavenge might not succeed
[16:0x7f50fd1533b0]   393919 ms: Mark-sweep 1811.2 (1890.6) -> 1806.4 (1891.6) MB, 4570.0 / 0.0 ms  (average mu = 0.128, current mu = 0.145) allocation failure GC in old space requested
<--- JS stacktrace --->
FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
npm ERR! path /app
npm ERR! command failed
npm ERR! signal SIGABRT
npm ERR! command sh -c rimraf dist && webpack build --config webpack.production.js
npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2022-08-11T21_50_36_294Z-debug-0.log

1. It成功地构建在我的本地机器上，没有Docker
2. 类似的分期设置(相同的webpack，只是没有MF)成功地构建在GitLab

上。

下面是Webpack构建ok的文件：

const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')

require('dotenv').config({ path: './.env' })

module.exports = {
  output: {
    publicPath: '.',
    path: path.resolve(__dirname, 'dist'),
    filename: '[name]-[contenthash].js'
  },
  mode: 'production',
  entry: {
    index: './src/index.tsx'
  },
  performance: {
    hints: false,
    maxEntrypointSize: 512000,
    maxAssetSize: 512000
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: require.resolve('ts-loader')
          }
        ]
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-modules-typescript-loader'
          },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          },
          {
            loader: 'sass-loader'
          }
        ]
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          }
        ]
      },
      {
        test: /\.(png|jpg|gif|env|glb|gltf|stl)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  plugins: [
    new HTMLWebpackPlugin({ template: './public/index.html' }),
    new Webpack.ProvidePlugin({ process: 'process/browser' }),
    new Webpack.DefinePlugin({ 'process.env': JSON.stringify(process.env) })
  ]
}

MF Webpack在Gitlab上失败了：

const Webpack = require('webpack')
const path = require('path')
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin')
const HTMLWebpackPlugin = require('html-webpack-plugin')

require('dotenv').config({ path: './.env' })

const deps = require('./package.json').dependencies

module.exports = {
  output: {
    publicPath: 'auto',
    path: path.resolve(__dirname, 'dist'),
    filename: '[name]-[contenthash].js'
  },
  mode: 'production',
  entry: {
    index: './src/index.tsx'
  },
  performance: {
    hints: false,
    maxEntrypointSize: 512000,
    maxAssetSize: 512000
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: require.resolve('ts-loader')
          }
        ]
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-modules-typescript-loader'
          },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          },
          {
            loader: 'sass-loader'
          }
        ]
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          }
        ]
      },
      {
        test: /\.(png|jpg|gif|env|glb|gltf|stl)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'game',
      filename: 'game.js',
      exposes: {
        './Game': './src/App.tsx'
      },
      remoteType: 'var',
      shared: {
        // ...deps,
        react: {
          singleton: true,
          eager: true,
          requiredVersion: deps.react
        },
        'react-dom': {
          singleton: true,
          requiredVersion: deps['react-dom']
        }
      }
    }),
    new HTMLWebpackPlugin({ template: './public/index.html' }),
    new Webpack.ProvidePlugin({ process: 'process/browser' }),
    new Webpack.DefinePlugin({ 'process.env': JSON.stringify(process.env) })
  ]
}

在本地，它被正确构建，文件不大于12 mb。应用程序起作用。Gitlab问题的原因是什么，以及如何克服这个问题？

Answer 1

这是免费的GitLab流道内存限制。用8GM系统内存吊起我的跑步者解决了这个问题。