This repo is to illustrate the difference of following requiring strategies used in Electron App.
- Directly use
require
API to load files one by one - Use Webpack to pack everything in one single file and run (import by
<script>
) - Use Rollup to pack everything in one single file (without runtime) and run (import by
<script>
)
The actual code should be fairly simple, it does not have much actual work.
Following are the steps to run the tests:
-
run
yarn
to install pre-requirements -
run
node ./bin/generate.js
to generate a bunch of small JavaScript files.
By default, it generates 100 files. To see the difference, you can also pass in environment variable to enlarge the number. Run:
TOTAL=10000 node ./bin/generate.js
It will generate 10000 files under src/generated
folder.
-
run
yarn babel
to transformimport
statement in JavaScript files torequire
, so that these files can be used directly in Electron; Then, runyarn start
to start Electron app and see the performance result. -
run
yarn webpack
to bundle all files together using Webpack; Then, runyarn start
to start Electron app and see the performance result. -
run
yarn rollup
to bundle all files together using Rollup; Then, runyarn start
to start Electron app and see the performance result.
As result of the tests, there are significant difference between requiring multiple small files and requiring one single bundled file. Testing from MacBook Pro 2018, i7, it took about 200ms to finish loading via requiring 100 small files; When switch to use bundled file, it took 170ms to load. If increase the number to 1000 files, it took babel version 500ms to load; while it only took 210ms to load when bundle all files together.
Webpack and Rollup show no difference in performance.