diff --git a/.babelrc b/.babelrc
index b56c72f..767e352 100644
--- a/.babelrc
+++ b/.babelrc
@@ -5,5 +5,6 @@
     },
     "modules": false,
     "useBuiltIns": true
-  }]]
+  }]],
+  "plugins": ["syntax-dynamic-import"]
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 17323d3..ea7b6a9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -513,6 +513,12 @@
       "integrity": "sha1-ytnK0RkbWtY0vzCuCHI5HgZHvpU=",
       "dev": true
     },
+    "babel-plugin-syntax-dynamic-import": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz",
+      "integrity": "sha1-jWomIpyDdFqZgqRBBRVyyqF5sdo=",
+      "dev": true
+    },
     "babel-plugin-syntax-exponentiation-operator": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz",
diff --git a/package.json b/package.json
index d2e6779..3634fd3 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/components/User/index.js b/src/components/User/index.js
index 51c9bff..6454754 100644
--- a/src/components/User/index.js
+++ b/src/components/User/index.js
@@ -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 = {
@@ -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) => {
@@ -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) => {
@@ -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);