Webpack während der '91% zusätzlichen Asset-Verarbeitung 'eingefroren

Question

Ich habe kürzlich eine großartige UI-Bibliothek namens' Antd 'zu meinem Projekt hinzugefügt. https://ant.design/docs/react/introduce

Es funktionierte einwandfrei in meiner Entwicklungsumgebung und ich habe viele Komponenten in meine Electron App implementiert. Jetzt, wo ich es für die Veröffentlichung verpacke, bleibt mein Webpack vollständig bei der '91% zusätzlichen Asset-Verarbeitung'-Stufe stecken, und schließlich hat V8 keinen Speicher mehr. Ich habe keine weitere Ausgabe. Gibt es irgendwo, wo ich detailliertere Logs bekommen kann, um festzustellen, was los ist?

Das problematische Web Pack Config ist unten, es basiert stark auf dem React Electron Boilerplate GitHub Repo und es hat mir bis jetzt extrem gut gedient.

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' 
    }), 
    ], 
}); 

Und hier ist der Stack-Trace aus dem webpack Ausgang;

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] 

Jede Hilfe wäre HUGELY geschätzt! Danke, Alex

Answer 1

Versuchen Sie die Einstellung devtool: 'cheap'. Wenn Sie eine große App haben, kann das Generieren von Quellkarten teuer sein. Es ist eine vorübergehende Lösung, bis this issue voll bekommt bekommt

Auch scheint es, dass dieses Projekt auf der Grundlage von Elektronen-Reaktion-Boilerplate basiert, die ich einen Kern Betreuer von bin. Sie sollten Fehlerberichte/Probleme dort öffnen.