Skip to content
This repository has been archived by the owner on May 15, 2023. It is now read-only.

Commit

Permalink
Split the app by routes
Browse files Browse the repository at this point in the history
  • Loading branch information
@iamakulov
iamakulov committed Jan 30, 2018
1 parent d71db76 commit a4ec643
Show file tree
Hide file tree
Showing 4 changed files with 18 additions and 7 deletions.
3 changes: 2 additions & 1 deletion .babelrc
View file
Expand Up @@ -5,5 +5,6 @@
},
"modules": false,
"useBuiltIns": true
}]]
}]],
"plugins": ["syntax-dynamic-import"]
}
6 changes: 6 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Expand Up @@ -20,6 +20,7 @@
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-preset-env": "^1.6.1",
"chalk": "^2.3.0",
"cross-env": "^5.1.1",
Expand Down
15 changes: 9 additions & 6 deletions src/components/User/index.js
View file
Expand Up @@ -25,9 +25,6 @@ import createHashRouter from 'hash-router';
import createPlainComponent from '../../utils/createPlainComponent';
import renderUserHeader from '../UserHeader';
import renderUsernameInput from '../UsernameInput';
import renderUserProfile from '../UserProfile';
import renderUserFollowers from '../UserFollowers';
import renderUserFollowing from '../UserFollowing';
import './style.css';

const Route = {
Expand Down Expand Up @@ -91,7 +88,9 @@ const render = target => {
routerTarget.innerHTML = '';
renderUsername(routerTarget, { username });
renderNavigation(routerTarget, { username, currentRoute: Route.USERNAME });
renderUserProfile(routerTarget, { username });
import('../UserProfile').then(UserProfile => {
UserProfile.default(routerTarget, { username });
});
});

router.addRoute('#/:username/followers', (hash, options) => {
Expand All @@ -100,7 +99,9 @@ const render = target => {
routerTarget.innerHTML = '';
renderUsername(routerTarget, { username });
renderNavigation(routerTarget, { username, currentRoute: Route.FOLLOWERS });
renderUserFollowers(routerTarget, { username });
import('../UserFollowers').then(UserFollowers => {
UserFollowers.default(routerTarget, { username });
});
});

router.addRoute('#/:username/following', (hash, options) => {
Expand All @@ -109,7 +110,9 @@ const render = target => {
routerTarget.innerHTML = '';
renderUsername(routerTarget, { username });
renderNavigation(routerTarget, { username, currentRoute: Route.FOLLOWING });
renderUserFollowing(routerTarget, { username });
import('../UserFollowing').then(UserFollowing => {
UserFollowing.default(routerTarget, { username });
});
});

window.addEventListener('hashchange', router);
Expand Down

1 comment on commit a4ec643

@iamakulov
Copy link
Contributor Author

@iamakulov iamakulov commented on a4ec643 Jan 30, 2018 •
edited

Choose a reason for hiding this comment

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

This commit splits the app by routes using the dynamic import(). Corresponding article section

The idea behind this is as follows. The /users/ page is a single-page app: it’s built into JS, and it has a router. When a user visits a specific page (e.g. /users/#/ai/following), they don’t need other pages. So we wrap the pages’ code with import() and load it only when they are necessary.

Generated files
Before:

runtime.e6e6dbc8636f21ac4610.js · 1.42 kB
vendor.affc614bbe6166cee297.js  · 144 kB
main.dbd723a68f0cea08d30d.js    · 10.5 kB
src/users/index.html            · 1.98 kB
src/index.html                  · 2.25 kB

After:

0.d93c72573d76a67fd44a.js       · 2.28 kB
1.70f9f5c7b6922d94e3ac.js       · 2.28 kB
2.8429a2eecb723f648aac.js       · 2.52 kB
runtime.e6e6dbc8636f21ac4610.js · 1.5 kB
vendor.affc614bbe6166cee297.js  · 143 kB
main.dbd723a68f0cea08d30d.js    · 8.46 kB
src/users/index.html            · 2.05 kB
src/index.html                  · 2.33 kB

In our case, moving out the routes doesn’t have a large effect because they’re small. However, in a larger app, this might provide a great benefit! (I’ve seen cases where the initial rendering time was decreased by 60-70%.)

Please sign in to comment.