Electron-react-boilerplate: Are packed files always that huge?

[SirWindfield]

Just a general question that I have. Building the files using yarn build results in the following file sizes:

| File | Size | Original Source File Size |
|---|---|---|
|main.prod.js|96,1kB|2,314kB|
|renderer.js|208kB|7,22kB|

It's seems odd that the electron main file (the file that loads the BrowserWindow) is actually so much larger than the input file used to create it.
I'm pretty new to the webpack ecosystem, so I would love if someone could help me out here. Why is the file that much larger?
Does it pack everything that mains need (path, electron) and other require calls to the file? And if yes, wouldn't it be more efficient to leave them in node_modules as the directory gets anyway packed into the final electron app by electron-builder?

[amilajack]

Here's what I get for the v0.13.3 branch

[0] Hash: 347fa4f7535d866c269f
[0] Version: webpack 4.1.1
[0] Time: 4657ms
[0] Built at: 4/18/2018 5:53:37 PM
[0]                  Asset      Size  Chunks             Chunk Names
[0]     ./app/main.prod.js  93.7 KiB       0  [emitted]  main
[0] ./app/main.prod.js.map   398 KiB       0  [emitted]  main
[0] Entrypoint main = ./app/main.prod.js ./app/main.prod.js.map
[0] [./app/main.dev.js] 3.07 KiB {0} [built]
[0] [./app/menu.js] 5.99 KiB {0} [built]
[0] [assert] external "assert" 42 bytes {0} [built]
[0] [child_process] external "child_process" 42 bytes {0} [built]
[0] [electron] external "electron" 42 bytes {0} [built]
[0] [events] external "events" 42 bytes {0} [built]
[0] [fs] external "fs" 42 bytes {0} [built]
[0] [https] external "https" 42 bytes {0} [built]
[0] [module] external "module" 42 bytes {0} [optional] [built]
[0] [path] external "path" 42 bytes {0} [built]
[0] [util] external "util" 42 bytes {0} [built]
[0]     + 35 hidden modules
[0] npm run build-main exited with code 0
[1] Hash: 3abe981a61ae97609892
[1] Version: webpack 4.1.1
[1] Time: 9523ms
[1] Built at: 4/18/2018 5:53:41 PM
[1]                                  Asset      Size  Chunks                    Chunk Names
[1]   674f50d287a8c48dc19ba404d20fe713.eot   162 KiB          [emitted]         
[1]   912ec66d7572ff821749319396470bde.svg   434 KiB          [emitted]  [big]  
[1]   b06871f281fee6b241d60582ae9369b9.ttf   162 KiB          [emitted]         
[1] af7ae505a9eed503f8b8e6982036873e.woff2  75.4 KiB          [emitted]         
[1]  fee66e712a8a08eef5805a46892932ad.woff  95.7 KiB          [emitted]         
[1]                       renderer.prod.js   191 KiB       0  [emitted]         main
[1]                              style.css  31.3 KiB       0  [emitted]         main
[1]                   renderer.prod.js.map   557 KiB       0  [emitted]         main
[1]                          style.css.map  86 bytes       0  [emitted]         main
[1] Entrypoint main = renderer.prod.js style.css renderer.prod.js.map style.css.map
[1] [./app/containers/App.js] 1.45 KiB {0} [built]
[1] [./app/containers/CounterPage.js] 1.03 KiB {0} [built]
[1] [./app/containers/HomePage.js] 1.42 KiB {0} [built]
[1] [./app/containers/Root.js] 1.67 KiB {0} [built]
[1] [./app/index.js] 1.93 KiB {0} [built]
[1] [./app/reducers/counter.js] 415 bytes {0} [built]
[1] [./app/reducers/index.js] 548 bytes {0} [built]
[1] [./app/routes.js] 1.84 KiB {0} [built]
[1] [./app/store/configureStore.js] 251 bytes {0} [built]
[1] [./app/store/configureStore.prod.js] 894 bytes {0} [built]
[1] [./node_modules/css-loader/index.js??ref--5-2!./app/app.global.css] ./node_modules/css-loader??ref--5-2!./app/app.global.css 688 bytes [built]
[1] [./node_modules/history/es/index.js] ./node_modules/history/es/index.js + 7 modules 31.9 KiB {0} [built]
[1]        |    8 modules
[1] [./node_modules/react-redux/es/index.js] ./node_modules/react-redux/es/index.js + 14 modules 37.4 KiB {0} [built]
[1]        |    15 modules
[1] [./node_modules/react-router-redux/es/index.js] ./node_modules/react-router-redux/es/index.js + 5 modules 6.51 KiB {0} [built]
[1]        |    6 modules
[1] [./node_modules/redux/es/index.js] ./node_modules/redux/es/index.js + 6 modules 20.6 KiB {0} [built]
[1]        |    7 modules
[1]     + 68 hidden modules
[1] 
[1] WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).

Note that webpack bundles include all the libraries that you import so they should definitely be bigger. Some bundles for apps that i've built on the boilerplate are a couple MB's (even up to 13MB in some cases). It really depends on what you're importing and how you import it.

[SirWindfield]

Does Electron load the files still faster compared to declaring every node dependency as external? I imagine that accessing one huge file is faster than multiply small ones.
I was just confused by the difference between the two files.

[amilajack]

@SirWindfield it surely does. require() makes recursive reads to the filesystem. Webpack defines imports in a fixed size array so imports inside webpack bundled code is really fast (can assume constant time).
example of what webpack will do if you're importing 3 functions called foo, bar, and baz

// bundled code
const webpack_memory = [function foo() {}, function bar() {}, function baz() {}]

// code that imports these fn's
const foo = webpack_memory[0];

So it's definitely faster. Webpack makes requires pretty much a zero cost abstraction. This is why this project uses webpack

Let me know if this makes sense