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 Mar 19, 2018
1 parent 426796d commit 900df35
Show file tree
Hide file tree
Showing 3 changed files with 12 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"]
}
1 change: 1 addition & 0 deletions package.json
View file
Expand Up @@ -18,6 +18,7 @@
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"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 900df35

@iamakulov
Copy link
Contributor Author

@iamakulov iamakulov commented on 900df35 Mar 19, 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:

                               Asset      Size  Chunks             Chunk Names
runtime~main.2a2e13c679f6f2471b8a.js  1.05 KiB       0  [emitted]  runtime~main
vendors~main.f7296c4f27876024a9ae.js   139 KiB       1  [emitted]  vendors~main
        main.450f9158b3f1fcb6552a.js  12.3 KiB       2  [emitted]  main
                       ..\index.html  2.47 KiB          [emitted]
                 ..\users\index.html  2.19 KiB          [emitted]

After:

                               Asset      Size  Chunks             Chunk Names
           0.61c5cfc8b9020c1b63ed.js  2.19 KiB       0  [emitted]
           1.4cf29d72a2e503b9a4b2.js  2.19 KiB       1  [emitted]
           2.55ecc69ea17f1f59e0ed.js  2.43 KiB       2  [emitted]
runtime~main.b43c762d9ad36f26b551.js  1.84 KiB       3  [emitted]  runtime~main
vendors~main.32d88076eb4ee0a88e16.js   138 KiB       4  [emitted]  vendors~main
        main.e39d2d53893c3d0c1a5e.js  10.3 KiB       5  [emitted]  main
                       ..\index.html  3.26 KiB          [emitted]
                 ..\users\index.html  2.99 KiB          [emitted]

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.