Skip to content
This repository has been archived by the owner on Jun 3, 2024. It is now read-only.

Use Webpack code-splitting to lazy load map bundle #304

Merged
merged 4 commits into from
Jul 22, 2019

Conversation

bbecquet
Copy link
Contributor

Advantages:

  • simpler webpack config, map is now part of the main bundle, but still loaded asynchronously on start-up via a dynamic import (see https://webpack.js.org/guides/code-splitting/#dynamic-imports)
  • simpler code, no need for a custom file loader (but it's still used to load language file so I didn't remove if from index.ejs)
  • the total size downloaded is smaller because Webpack can now reuse code already imported in the parent bundle when loading the map part

Number proof

Before

                             Asset       Size            Chunks             Chunk Names
                         bundle.js    972 KiB              main  [emitted]  main
                     bundle.js.map    799 KiB              main  [emitted]  main
                masq-lib.bundle.js   1.04 KiB          masq-lib  [emitted]  masq-lib
            masq-lib.bundle.js.map  430 bytes          masq-lib  [emitted]  masq-lib
        vendors~masq-lib.bundle.js    766 KiB  vendors~masq-lib  [emitted]  vendors~masq-lib
    vendors~masq-lib.bundle.js.map    854 KiB  vendors~masq-lib  [emitted]  vendors~masq-lib

[...]

         Asset      Size  Chunks             Chunk Names
        map.js   1.4 MiB    main  [emitted]  main
    map.js.map  1.24 MiB    main  [emitted]  main

==> bundle + map = 972 + 1400 => 2372 KiB

After

                             Asset       Size            Chunks             Chunk Names
                         bundle.js    972 KiB              main  [emitted]  main
                     bundle.js.map    799 KiB              main  [emitted]  main
                     map.bundle.js    144 KiB               map  [emitted]  map
                 map.bundle.js.map   82.6 KiB               map  [emitted]  map
                masq-lib.bundle.js   1.04 KiB          masq-lib  [emitted]  masq-lib
            masq-lib.bundle.js.map  430 bytes          masq-lib  [emitted]  masq-lib
             vendors~map.bundle.js    816 KiB       vendors~map  [emitted]  vendors~map
         vendors~map.bundle.js.map    779 KiB       vendors~map  [emitted]  vendors~map
        vendors~masq-lib.bundle.js    766 KiB  vendors~masq-lib  [emitted]  vendors~masq-lib
    vendors~masq-lib.bundle.js.map    854 KiB  vendors~masq-lib  [emitted]  vendors~masq-lib

==> bundle + map + vendors~map = 972 + 144 + 816 => 1932 KiB

Copy link
Contributor

@amatissart amatissart left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! This will also help to remove use of events in the future, and make the code simpler.

A rebase in needed to solve a conflict in the .eslintignore

views/index.ejs Show resolved Hide resolved
Copy link
Contributor

@amatissart amatissart left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For the record, bundle sizes in "production" mode:

                     Asset       Size  Chunks                    Chunk Names
                 bundle.js    311 KiB       0  [emitted]  [big]  main
             map.bundle.js   33.8 KiB       1  [emitted]         map
        masq-lib.bundle.js  160 bytes       2  [emitted]         masq-lib
     vendors~map.bundle.js    808 KiB       3  [emitted]  [big]  vendors~map
vendors~masq-lib.bundle.js    336 KiB       4  [emitted]  [big]  vendors~masq-lib

@amatissart amatissart merged commit 0933576 into Qwant:master Jul 22, 2019
@bbecquet bbecquet deleted the map-bundle-load branch July 22, 2019 14:37
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants