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. 它在没有Docker的本地机器上成功构建
2. 类似的暂存设置(相同的webpack，只是没有MF(在GitLab上成功构建

以下是文件构建良好的Webpack:

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) })
]
}

在Gitlab:上失败的MF Webpack

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 runner RAM限制。用8GM系统内存提升我的跑步者解决了这个问题。