reactjs - Webpack在 '91% additional asset processing'期间卡住

Question

我最近在我的项目中添加了一个很棒的UI库，名为“Antd”。
https://ant.design/docs/react/introduce

它在我的开发环境中可以完美地工作，并且我在Electron App中实现了很多组件。现在，当我打包发布它时，我的Webpack完全处于“91％附加 Assets 处理”阶段，最终V8内存不足。我没有进一步的输出。有什么地方我可以获取更详细的日志以确定发生了什么事情？

有问题的Web Pack配置位于下面，它很大程度上基于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]

任何帮助将不胜感激!谢谢，
亚历克斯

Answer 1

尝试设置devtool: 'cheap'。如果您有大型应用程序，则生成源 map 可能会很昂贵。这是this issue完全获得之前的临时解决方案

同样，该项目似乎基于我是核心维护者的 Electron react 样板。您应该在此处打开错误报告/问题。