在'91％附加資產處理期間被凍結的Webpack

Question

我最近在我的項目中添加了一個名爲'Antd'的優秀UI庫。 https://ant.design/docs/react/introduce

它在我的開發環境中工作完美無瑕，並且在我的電子應用程序中實現了很多組件。現在，當我將它打包發佈時，我的Webpack完全停留在'91％額外資產處理'階段，最終V8內存不足。我沒有進一步的輸出。有沒有我能得到更詳細的日誌來確定發生了什麼？

有問題的網絡包配置如下，其基於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] 

任何幫助將HUGELY讚賞！謝謝， 亞歷克斯

Answer 1

嘗試設置devtool: 'cheap'。如果你有一個大的應用程序，生成源代碼可能很昂貴。它是一個臨時的解決方案，直到this issue完全得到

此外，它似乎像這個項目是基於電子反應樣板，我是一個核心維護者。你應該在那裏打開bug報告/問題。