Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use dynamic import to load LiteMol package #56

Merged
merged 2 commits into from Jun 6, 2019
Merged

Conversation

mirandaio
Copy link
Contributor

@mirandaio mirandaio commented Jun 6, 2019

This PR uses a dynamic import to load the LiteMol package. Doing this will extract the LiteMol code into a separate .js file which will only be loaded when a user wants to see the LiteMol structure in the app. Doing this reduces the initial JS code that is loaded into the browser when a user first visits the app, hence providing faster loading times.

The table below summarises the file sizes:

Code splitting Files minified minified and gzipped (what Netlify serves)
No code splitting main.[hash].chunk.js (app code) 245 KB 69.06 KB
2.[hash].chunk.js (libraries with LiteMol) 4.5 MB 1.29 MB
With code splitting main.[hash].chunk.js (app code) 245 KB 69.17 KB
2.[hash].chunk.js (libraries without LiteMol) 3.2 MB 981.63 KB
3.[hash].chunk.js (LiteMol) 1.3 MB 340.3 KB

@mirandaio mirandaio changed the title Code split LiteMol third party plugin Use dynamic import to load LiteMol package Jun 6, 2019
Copy link
Contributor

@peatroot peatroot left a comment

Choose a reason for hiding this comment

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

LGTM!

@peatroot peatroot merged commit e5d137f into master Jun 6, 2019
@peatroot peatroot deleted the am-codesplit-litemol branch June 6, 2019 14:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
2 participants