Question

我正在使用与webpack的反应。

我有一个包含数百个SVG的文件夹因此我使用webpacks动态导入语法，如import('../images_svg/' + svgData.path + '.svg')遗憾的是，这并不起作用。我也在使用svg-inline-loader。

这就是我得到以下异常的原因：

<--- Last few GCs --->

   95733 ms: Mark-sweep 1301.0 (1434.6) -> 1303.2 (1434.6) MB, 61.8 / 0.0 ms [allocation failure] [scavenge might not succeed].
   95794 ms: Mark-sweep 1303.2 (1434.6) -> 1305.4 (1434.6) MB, 60.9 / 0.0 ms [allocation failure] [scavenge might not succeed].
   95856 ms: Mark-sweep 1305.4 (1434.6) -> 1312.2 (1418.6) MB, 62.3 / 0.0 ms [last resort gc].
   95922 ms: Mark-sweep 1312.2 (1418.6) -> 1319.1 (1418.6) MB, 65.9 / 0.0 ms [last resort gc].


<--- JS stacktrace --->

==== JS stack trace =========================================

Security context: 000001788583FA99 <JS Object>
    1: stringify [native json.js:178] [pc=000002CFEA0A3CF7] (this=0000017885846091 <a JSON with map 0000010551613B91>,E=0000023A39E19981 <Very long string[11977826]>,F=0000017885804241 <undefined>,S=0000017885804241 <undefined>)
    2: arguments adaptor frame: 1->3
    3: /* anonymous */ [C:\Users\phili\Documents\Kunden\step1\app\node_modules\webpack\lib\EvalDevToolModuleTemplatePlugin.js:~17...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

如何使用webpack动态导入所有SVG，而不会出现堆内存不足错误？

Answer 1

更新了解决方案

非常感谢Dan Abramov（Redux的创造者）。他建议我使用public自述文件中描述的create-react-app文件夹，不要通过webpack导入SVG：
Adding asssets outside of the module system

create-react-app自述文件说明：

通常我们建议您从JavaScript导入样式表，图片和字体。公用文件夹可用作许多不太常见的情况的解决方法：

其中一个案例是：

您有数千张图片，需要动态引用其路径。

所以现在我正在使用这个fetch库，它已经包含在配置中（弹出后由create-react-app生成）

使用fetch我可以从public文件夹动态加载图片并启动webpack，而不会再出现内存问题。

旧解决方案

解决方案是使用

node --max_old_space_size=8000 scripts/start.js

让它运作起来。但是加载大约需要10分钟。为了让它更快地开始，我们可以使用webpack的cache-loader。因此，我将加载时间减少到一分钟。

请参阅此主题以解决问题https://github.com/webpack/webpack/issues/5747

Webpack动态导入表达式不起作用

1 个答案: