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

Question

I am using react with webpack.

I got a folder with hundreds of SVGs in it.
Thereby I am using webpacks dynamic import syntax like so import('../images_svg/' + svgData.path + '.svg') sadly this doesn't work. Also I am using the svg-inline-loader.

That's why I get the following exception:

<--- 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 

How can I dynamically import all SVGs using webpack, without getting a heap out of memory error?

Answer 1

Updated solution

A big thanks to Dan Abramov (creator of Redux). He suggested me to use the public folder as described in the create-react-app readme and to not import the SVGs via webpack:
Adding asssets outside of the module system

The create-react-app readme states:

Normally we recommend importing stylesheets, images, and fonts from JavaScript. The public folder is useful as a workaround for a number of less common cases:

One of those cases is:

You have thousands of images and need to dynamically reference their paths.

So now I am using this fetch library, which was already included in the config (generated by create-react-app after ejecting)

Using fetch I could load the images dynamically from the public folder and start webpack without getting ever again a memory issue.

Old solution

A solution is to use

node --max_old_space_size=8000 scripts/start.js

to get it working. But it took approximately 10 minutes to load. To get it start faster we can use webpack's cache-loader . Thereby I reduced the loading time to one minute.

See this thread to the problem https://github.com/webpack/webpack/issues/5747