我最近在我的项目中添加了一个名为“Antd”的很棒的UI库。https://ant.design/docs/react/introduce
它在我的开发环境中完美地工作,我已经在我的电子应用程序中实现了很多组件。现在当我开始打包发布它时,我的Webpack完全停留在“91%的额外资产处理”阶段,最终V8耗尽了内存。我没有进一步的输出。有什么地方我可以得到更详细的日志来确定发生了什么?
有问题的网络包配置如下,它严重基于React电子样板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]
任何帮助都将不胜感激!谢谢,亚历克斯
3条答案
按热度按时间9njqaruj1#
尝试设置
devtool: 'cheap'
。如果你有一个大的应用程序,生成源Map可能会很昂贵。这是一个临时的解决方案,直到this issue完全获取同时,这个项目似乎是基于电子React样板,我是一个核心维护者。你应该打开错误报告/问题。
a64a0gku2#
下面的设置帮助我减少了堆内存,因为它将不包括sourceMap文件。
或以下代码将有助于最新的网页包丑化插件。
如果这仍然无助于解决问题。下面的命令有助于增加堆内存和回答链接,了解更多关于堆内存是下面的。
https://stackoverflow.com/a/57480923/1533666
ki1q1bka3#
贝娄的工作为我.....我删除了 Bootstrap (样式和脚本)链接从angular.json,也删除了这行。
}