How to include large JSON file in frontend using Js/React/Gulp/Webpack-combo
<p>for a project I need to include a large JSON file in my web frontend for data visualization. The JOSN file is 9MB large.</p>

<p>How can I include it. My stack is JavaScript, Node.js, React, Gulp, Webpack.</p>

<p>I tried to just include it via import in my React module:</p>

<pre><code>import data from '../assets/data.json';
</code></pre>

<p>However when I try to compile it, I get the following error:</p>

<pre><code>[09:50:32] Error: Command failed: cd web &amp;&amp; gulp --max-old-space-size=4096 build
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

    at ChildProcess.exithandler (child_process.js:206:12)
    at emitTwo (events.js:106:13)
    at ChildProcess.emit (events.js:191:7)
    at maybeClose (internal/child_process.js:877:16)
    at Socket.&lt;anonymous&gt; (internal/child_process.js:334:11)
    at emitOne (events.js:96:13)
    at Socket.emit (events.js:188:7)
    at Pipe._handle.close [as _onclose] (net.js:498:12)
</code></pre>

<p>I tried using this <code>--max-old-space-size=4096</code> that you find as general solution for this problem on SO but I did not help.</p>

<p>So my question is:</p>

<p>How can I include this large JSON file in my frontend?
Sure I could load it deferred after the page has been loaded directly from the server but I would like to include it directly in the page. Loading times are irrelevant in this case. The frontend will not be hosted somewhere publicly. So what are my options to include this using React/Webpack/gulp and how do I do it? Can I somehow include that file without being parsed by webpack which causes this out-of-memory-error?</p>