最近、「Antd」という優れた UI ライブラリをプロジェクトに追加しました。 https://ant.design/docs/react/introduce
私の開発環境では問題なく動作し、多くのコンポーネントを Electron アプリに実装しました。リリース用にパッケージ化しようとすると、Webpack は「91% の追加アセット処理」段階で完全にスタックし、最終的に V8 がメモリ不足になります。これ以上の出力はありません。何が起こっているかを判断するために、より詳細なログを取得できる場所はありますか?
問題のある Web パックの構成は以下のとおりです。これは、React Electron Boilerplate GitHub リポジトリに大きく基づいており、今まで非常に役に立ちました。
import path from 'path';
import webpack from 'webpack';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
import merge from 'webpack-merge';
import BabiliPlugin from 'babili-webpack-plugin';
import baseConfig from './webpack.config.base';
export default merge.smart(baseConfig, {
// devtool: 'source-map',
target: 'electron-renderer',
entry: ['babel-polyfill', './app/index'],
output: {
path: path.join(__dirname, 'app/dist'),
publicPath: '../dist/'
},
module: {
rules: [
// Extract all .global.css to style.css as is
{
test: /\.global\.css$/,
use: ExtractTextPlugin.extract({
use: 'css-loader',
fallback: 'style-loader',
})
},
// Pipe other styles through css modules and append to style.css
{
test: /^((?!\.global).)*\.css$/,
use: ExtractTextPlugin.extract({
use: {
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: '[name]__[local]__[hash:base64:5]',
}
}
}),
},
// Add SASS support - compile all .global.scss files and pipe it to style.css
{
test: /\.global\.scss$/,
use: ExtractTextPlugin.extract({
use: [
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
}
],
fallback: 'style-loader',
})
},
// Add SASS support - compile all other .scss files and pipe it to style.css
{
test: /^((?!\.global).)*\.scss$/,
use: ExtractTextPlugin.extract({
use: [{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: '[name]__[local]__[hash:base64:5]',
}
},
{
loader: 'sass-loader'
}]
}),
},
// WOFF Font
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/font-woff',
}
},
},
// WOFF2 Font
{
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/font-woff',
}
}
},
// TTF Font
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/octet-stream'
}
}
},
// EOT Font
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
use: 'file-loader',
},
// SVG Font
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'image/svg+xml',
}
}
},
// Common Image Formats
{
test: /\.(?:ico|gif|png|jpg|jpeg|webp)$/,
use: 'url-loader',
}
]
},
plugins: [
/**
* Create global constants which can be configured at compile time.
*
* Useful for allowing different behaviour between development builds and
* release builds
*
* NODE_ENV should be production so that modules do not perform certain
* development checks
*/
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production')
}),
/**
* Babli is an ES6+ aware minifier based on the Babel toolchain (beta)
*/
new BabiliPlugin(),
new ExtractTextPlugin('style.css'),
new BundleAnalyzerPlugin({
analyzerMode: process.env.OPEN_ANALYZER === 'true' ? 'server' : 'disabled',
openAnalyzer: process.env.OPEN_ANALYZER === 'true'
}),
],
});
そして、これが webpack 出力からのスタック トレースです。
16706ms building modules
137ms sealing
10ms optimizing
0ms basic module optimization
17ms module optimization
1ms advanced module optimization
0ms basic chunk optimization
0ms chunk optimization
25ms advanced chunk optimization
2162ms building modules
0ms module and chunk tree optimization
15ms module reviving
8ms module order optimization
7ms module id optimization
4ms chunk reviving
0ms chunk order optimization
22ms chunk id optimization
55ms hashing
1ms module assets processing
109ms chunk assets processing
4ms additional chunk assets processing
1ms recording
91% additional asset processing
<--- Last few GCs --->
[1279:0x103801600] 485158 ms: Mark-sweep 1339.5 (1509.3) -> 1339.5 (1509.8) MB, 2810.3 / 0.0 ms allocation failure GC in old space requested
[1279:0x103801600] 488159 ms: Mark-sweep 1339.5 (1509.8) -> 1339.4 (1463.3) MB, 3001.2 / 0.0 ms last resort
[1279:0x103801600] 491070 ms: Mark-sweep 1339.4 (1463.3) -> 1339.4 (1456.3) MB, 2910.5 / 0.0 ms last resort
<--- JS stacktrace --->
==== JS stack trace =========================================
Security context: 0x2511c21a66a1 <JS Object>
1: set [native weak-collection.js:~43] [pc=0x2de514c759df](this=0x28fdfc5c2d29 <JS WeakMap>,m=0x267d0ab55949 <a Node with map 0x2b746f329501>,o=0x1fe36e4c1f89 <JS Array[0]>)
2: get [/Users/alexmorris/Documents/FCA/eBundleViewer/node_modules/babel-traverse/lib/path/index.js:~76] [pc=0x2de515031fe1](this=0x13d83be85de1 <JS Function NodePath (SharedFunctionInfo 0x7dd00c3dae1)>,_ref=0x2129c...
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
1: node::Abort() [/usr/local/bin/node]
どんな助けでも大歓迎です！ありがとう、アレックス