From: Stas Vilchik <stas.vilchik@sonarsource.com>
Date: Tue, 18 Jul 2017 13:11:50 +0000 (+0200)
Subject: replace require.ensure with dymamic import (#2187)
X-Git-Tag: 6.6-RC1~875
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=f42aaaa98952fa997665dfbe29515eb993e67701;p=sonarqube.git

replace require.ensure with dymamic import (#2187)
---

diff --git a/server/sonar-web/.babelrc b/server/sonar-web/.babelrc
index 3f2673a82bd..2962b9304d5 100644
--- a/server/sonar-web/.babelrc
+++ b/server/sonar-web/.babelrc
@@ -25,11 +25,13 @@
   "env": {
     "production": {
       "plugins": [
+        "syntax-dynamic-import",
         "transform-react-constant-elements"
       ]
     },
     "development": {
       "plugins": [
+        "syntax-dynamic-import",
         "transform-react-jsx-source",
         "transform-react-jsx-self"
       ]
@@ -37,6 +39,7 @@
     "test": {
       "plugins": [
         "transform-es2015-modules-commonjs",
+        "dynamic-import-node",
         "transform-react-jsx-source",
         "transform-react-jsx-self"
       ]
diff --git a/server/sonar-web/package.json b/server/sonar-web/package.json
index 7405c034c03..bf0c23036be 100644
--- a/server/sonar-web/package.json
+++ b/server/sonar-web/package.json
@@ -43,9 +43,11 @@
   "devDependencies": {
     "autoprefixer": "7.1.1",
     "babel-core": "^6.22.1",
-    "babel-eslint": "6.1.2",
+    "babel-eslint": "7.2.3",
     "babel-jest": "19.0.0",
     "babel-loader": "7.0.0",
+    "babel-plugin-dynamic-import-node": "1.0.2",
+    "babel-plugin-syntax-dynamic-import": "6.18.0",
     "babel-plugin-transform-class-properties": "^6.22.0",
     "babel-plugin-transform-object-rest-spread": "^6.22.0",
     "babel-plugin-transform-react-constant-elements": "^6.22.0",
diff --git a/server/sonar-web/src/main/js/apps/about/components/AboutAppForSonarQubeDotComLazyLoader.js b/server/sonar-web/src/main/js/apps/about/components/AboutAppForSonarQubeDotComLazyLoader.js
index 5af2402c06e..8d22b8f8b43 100644
--- a/server/sonar-web/src/main/js/apps/about/components/AboutAppForSonarQubeDotComLazyLoader.js
+++ b/server/sonar-web/src/main/js/apps/about/components/AboutAppForSonarQubeDotComLazyLoader.js
@@ -29,11 +29,9 @@ export default class AboutAppForSonarQubeDotComLazyLoader extends React.PureComp
 
   componentDidMount() {
     if (!this.state.AboutAppForSonarQubeDotCom) {
-      require.ensure([], require => {
-        this.setState({
-          AboutAppForSonarQubeDotCom: require('./AboutAppForSonarQubeDotCom').default
-        });
-      });
+      import('./AboutAppForSonarQubeDotCom').then(({ default: AboutAppForSonarQubeDotCom }) =>
+        this.setState({ AboutAppForSonarQubeDotCom })
+      );
     }
   }
 
diff --git a/server/sonar-web/src/main/js/apps/about/routes.js b/server/sonar-web/src/main/js/apps/about/routes.js
index 233b7e289ac..0748dad497d 100644
--- a/server/sonar-web/src/main/js/apps/about/routes.js
+++ b/server/sonar-web/src/main/js/apps/about/routes.js
@@ -20,9 +20,7 @@
 const routes = [
   {
     getIndexRoute(_, callback) {
-      require.ensure([], require =>
-        callback(null, { component: require('./components/AboutApp').default })
-      );
+      import('./components/AboutApp').then(i => callback(null, { component: i.default }));
     }
   }
 ];
diff --git a/server/sonar-web/src/main/js/apps/account/routes.js b/server/sonar-web/src/main/js/apps/account/routes.js
index 43cd438d7b0..2b92bf00f6b 100644
--- a/server/sonar-web/src/main/js/apps/account/routes.js
+++ b/server/sonar-web/src/main/js/apps/account/routes.js
@@ -20,52 +20,42 @@
 const routes = [
   {
     getComponent(_, callback) {
-      require.ensure([], require => callback(null, require('./components/Account').default));
+      import('./components/Account').then(i => callback(null, i.default));
     },
     childRoutes: [
       {
         getIndexRoute(_, callback) {
-          require.ensure([], require =>
-            callback(null, { component: require('./profile/Profile').default })
-          );
+          import('./profile/Profile').then(i => callback(null, { component: i.default }));
         }
       },
       {
         path: 'security',
         getComponent(_, callback) {
-          require.ensure([], require => callback(null, require('./components/Security').default));
+          import('./components/Security').then(i => callback(null, i.default));
         }
       },
       {
         path: 'projects',
         getComponent(_, callback) {
-          require.ensure([], require =>
-            callback(null, require('./projects/ProjectsContainer').default)
-          );
+          import('./projects/ProjectsContainer').then(i => callback(null, i.default));
         }
       },
       {
         path: 'notifications',
         getComponent(_, callback) {
-          require.ensure([], require =>
-            callback(null, require('./notifications/Notifications').default)
-          );
+          import('./notifications/Notifications').then(i => callback(null, i.default));
         }
       },
       {
         path: 'organizations',
         getComponent(_, callback) {
-          require.ensure([], require =>
-            callback(null, require('./organizations/UserOrganizations').default)
-          );
+          import('./organizations/UserOrganizations').then(i => callback(null, i.default));
         },
         childRoutes: [
           {
             path: 'create',
             getComponent(_, callback) {
-              require.ensure([], require =>
-                callback(null, require('./organizations/CreateOrganizationForm').default)
-              );
+              import('./organizations/CreateOrganizationForm').then(i => callback(null, i.default));
             }
           }
         ]
diff --git a/server/sonar-web/src/main/js/apps/background-tasks/routes.js b/server/sonar-web/src/main/js/apps/background-tasks/routes.js
index bdc399c3b33..3f46e626d9e 100644
--- a/server/sonar-web/src/main/js/apps/background-tasks/routes.js
+++ b/server/sonar-web/src/main/js/apps/background-tasks/routes.js
@@ -20,9 +20,7 @@
 const routes = [
   {
     getIndexRoute(_, callback) {
-      require.ensure([], require =>
-        callback(null, { component: require('./components/BackgroundTasksApp').default })
-      );
+      import('./components/BackgroundTasksApp').then(i => callback(null, { component: i.default }));
     }
   }
 ];
diff --git a/server/sonar-web/src/main/js/apps/code/routes.js b/server/sonar-web/src/main/js/apps/code/routes.js
index 73a48b7b9c3..4de41657b76 100644
--- a/server/sonar-web/src/main/js/apps/code/routes.js
+++ b/server/sonar-web/src/main/js/apps/code/routes.js
@@ -20,9 +20,7 @@
 const routes = [
   {
     getIndexRoute(_, callback) {
-      require.ensure([], require =>
-        callback(null, { component: require('./components/App').default })
-      );
+      import('./components/App').then(i => callback(null, { component: i.default }));
     }
   }
 ];
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/routes.js b/server/sonar-web/src/main/js/apps/coding-rules/routes.js
index a1bba34c6b6..af91a4eab6d 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/routes.js
+++ b/server/sonar-web/src/main/js/apps/coding-rules/routes.js
@@ -21,9 +21,7 @@ const routes = [
   {
     indexRoute: {
       getComponent(_, callback) {
-        require.ensure([], require => {
-          callback(null, require('./components/CodingRulesAppContainer').default);
-        });
+        import('./components/CodingRulesAppContainer').then(i => callback(null, i.default));
       }
     }
   }
diff --git a/server/sonar-web/src/main/js/apps/component-measures/routes.js b/server/sonar-web/src/main/js/apps/component-measures/routes.js
index c4b1fb5162d..0c4f83db5e1 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/routes.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/routes.js
@@ -20,27 +20,25 @@
 const routes = [
   {
     getComponent(_, callback) {
-      require.ensure([], require => callback(null, require('./app/AppContainer').default));
+      import('./app/AppContainer').then(i => callback(null, i.default));
     },
     childRoutes: [
       {
         getComponent(_, callback) {
-          require.ensure([], require => callback(null, require('./home/HomeContainer').default));
+          import('./home/HomeContainer').then(i => callback(null, i.default));
         },
         childRoutes: [
           {
             getIndexRoute(_, callback) {
-              require.ensure([], require =>
-                callback(null, { component: require('./home/AllMeasuresContainer').default })
+              import('./home/AllMeasuresContainer').then(i =>
+                callback(null, { component: i.default })
               );
             }
           },
           {
             path: 'domain/:domainName',
             getComponent(_, callback) {
-              require.ensure([], require =>
-                callback(null, require('./home/DomainMeasuresContainer').default)
-              );
+              import('./home/DomainMeasuresContainer').then(i => callback(null, i.default));
             }
           }
         ]
@@ -48,9 +46,7 @@ const routes = [
       {
         path: 'metric/:metricKey',
         getComponent(_, callback) {
-          require.ensure([], require =>
-            callback(null, require('./details/MeasureDetailsContainer').default)
-          );
+          import('./details/MeasureDetailsContainer').then(i => callback(null, i.default));
         },
         childRoutes: [
           {
@@ -67,17 +63,13 @@ const routes = [
           {
             path: 'list',
             getComponent(_, callback) {
-              require.ensure([], require =>
-                callback(null, require('./details/drilldown/ListViewContainer').default)
-              );
+              import('./details/drilldown/ListViewContainer').then(i => callback(null, i.default));
             }
           },
           {
             path: 'tree',
             getComponent(_, callback) {
-              require.ensure([], require =>
-                callback(null, require('./details/drilldown/TreeViewContainer').default)
-              );
+              import('./details/drilldown/TreeViewContainer').then(i => callback(null, i.default));
             }
           },
           {
@@ -96,8 +88,8 @@ const routes = [
           {
             path: 'treemap',
             getComponent(_, callback) {
-              require.ensure([], require =>
-                callback(null, require('./details/treemap/MeasureTreemapContainer').default)
+              import('./details/treemap/MeasureTreemapContainer').then(i =>
+                callback(null, i.default)
               );
             }
           }
diff --git a/server/sonar-web/src/main/js/apps/component/routes.js b/server/sonar-web/src/main/js/apps/component/routes.js
index edb7d77a7f2..9943b1d8380 100644
--- a/server/sonar-web/src/main/js/apps/component/routes.js
+++ b/server/sonar-web/src/main/js/apps/component/routes.js
@@ -21,7 +21,7 @@ const routes = [
   {
     indexRoute: {
       getComponent(_, callback) {
-        require.ensure([], require => callback(null, require('./components/App').default));
+        import('./components/App').then(i => callback(null, i.default));
       }
     }
   }
diff --git a/server/sonar-web/src/main/js/apps/custom-measures/routes.js b/server/sonar-web/src/main/js/apps/custom-measures/routes.js
index f4e98ca2c3a..e3aee2038cd 100644
--- a/server/sonar-web/src/main/js/apps/custom-measures/routes.js
+++ b/server/sonar-web/src/main/js/apps/custom-measures/routes.js
@@ -20,8 +20,8 @@
 const routes = [
   {
     getIndexRoute(_, callback) {
-      require.ensure([], require =>
-        callback(null, { component: require('./components/CustomMeasuresAppContainer').default })
+      import('./components/CustomMeasuresAppContainer').then(i =>
+        callback(null, { component: i.default })
       );
     }
   }
diff --git a/server/sonar-web/src/main/js/apps/groups/routes.js b/server/sonar-web/src/main/js/apps/groups/routes.js
index d161da9d9fe..8829f80c94b 100644
--- a/server/sonar-web/src/main/js/apps/groups/routes.js
+++ b/server/sonar-web/src/main/js/apps/groups/routes.js
@@ -20,12 +20,12 @@
 const routes = [
   {
     getIndexRoute(_, callback) {
-      require.ensure([], require => {
-        const GroupsAppContainer = require('./components/GroupsAppContainer').default;
-        const forSingleOrganization = require('../organizations/forSingleOrganization').default;
-        const component = forSingleOrganization(GroupsAppContainer);
-        callback(null, { component });
-      });
+      Promise.all([
+        import('./components/GroupsAppContainer').then(i => i.default),
+        import('../organizations/forSingleOrganization').then(i => i.default)
+      ]).then(([GroupsAppContainer, forSingleOrganization]) =>
+        callback(null, { component: forSingleOrganization(GroupsAppContainer) })
+      );
     }
   }
 ];
diff --git a/server/sonar-web/src/main/js/apps/issues/routes.js b/server/sonar-web/src/main/js/apps/issues/routes.js
index f4c372a1368..ffcdcb7a090 100644
--- a/server/sonar-web/src/main/js/apps/issues/routes.js
+++ b/server/sonar-web/src/main/js/apps/issues/routes.js
@@ -22,11 +22,8 @@ import { onEnter } from './redirects';
 const routes = [
   {
     getIndexRoute(_, callback) {
-      require.ensure([], require =>
-        callback(null, {
-          component: require('./components/AppContainer').default,
-          onEnter
-        })
+      import('./components/AppContainer').then(i =>
+        callback(null, { component: i.default, onEnter })
       );
     }
   }
diff --git a/server/sonar-web/src/main/js/apps/metrics/routes.js b/server/sonar-web/src/main/js/apps/metrics/routes.js
index 6cbe20ddab9..637dba72da9 100644
--- a/server/sonar-web/src/main/js/apps/metrics/routes.js
+++ b/server/sonar-web/src/main/js/apps/metrics/routes.js
@@ -20,8 +20,8 @@
 const routes = [
   {
     getIndexRoute(_, callback) {
-      require.ensure([], require =>
-        callback(null, { component: require('./components/MetricsAppContainer').default })
+      import('./components/MetricsAppContainer').then(i =>
+        callback(null, { component: i.default })
       );
     }
   }
diff --git a/server/sonar-web/src/main/js/apps/overview/routes.js b/server/sonar-web/src/main/js/apps/overview/routes.js
index 7af0479bb25..02a7323043e 100644
--- a/server/sonar-web/src/main/js/apps/overview/routes.js
+++ b/server/sonar-web/src/main/js/apps/overview/routes.js
@@ -20,9 +20,7 @@
 const routes = [
   {
     getIndexRoute(_, callback) {
-      require.ensure([], require =>
-        callback(null, { component: require('./components/AppContainer').default })
-      );
+      import('./components/AppContainer').then(i => callback(null, { component: i.default }));
     }
   }
 ];
diff --git a/server/sonar-web/src/main/js/apps/permission-templates/routes.js b/server/sonar-web/src/main/js/apps/permission-templates/routes.js
index d44e8735ad3..ce1b2679e4a 100644
--- a/server/sonar-web/src/main/js/apps/permission-templates/routes.js
+++ b/server/sonar-web/src/main/js/apps/permission-templates/routes.js
@@ -20,12 +20,12 @@
 const routes = [
   {
     getIndexRoute(_, callback) {
-      require.ensure([], require => {
-        const AppContainer = require('./components/AppContainer').default;
-        const forSingleOrganization = require('../organizations/forSingleOrganization').default;
-        const component = forSingleOrganization(AppContainer);
-        callback(null, { component });
-      });
+      Promise.all([
+        import('./components/AppContainer').then(i => i.default),
+        import('../organizations/forSingleOrganization').then(i => i.default)
+      ]).then(([AppContainer, forSingleOrganization]) =>
+        callback(null, { component: forSingleOrganization(AppContainer) })
+      );
     }
   }
 ];
diff --git a/server/sonar-web/src/main/js/apps/permissions/routes.js b/server/sonar-web/src/main/js/apps/permissions/routes.js
index 71a6d7aba3a..631a26985b1 100644
--- a/server/sonar-web/src/main/js/apps/permissions/routes.js
+++ b/server/sonar-web/src/main/js/apps/permissions/routes.js
@@ -20,12 +20,12 @@
 export const globalPermissionsRoutes = [
   {
     getIndexRoute(_, callback) {
-      require.ensure([], require => {
-        const GlobalPermissionsApp = require('./global/components/App').default;
-        const forSingleOrganization = require('../organizations/forSingleOrganization').default;
-        const component = forSingleOrganization(GlobalPermissionsApp);
-        callback(null, { component });
-      });
+      Promise.all([
+        import('./global/components/App').then(i => i.default),
+        import('../organizations/forSingleOrganization').then(i => i.default)
+      ]).then(([App, forSingleOrganization]) =>
+        callback(null, { component: forSingleOrganization(App) })
+      );
     }
   }
 ];
@@ -33,8 +33,8 @@ export const globalPermissionsRoutes = [
 export const projectPermissionsRoutes = [
   {
     getIndexRoute(_, callback) {
-      require.ensure([], require =>
-        callback(null, { component: require('./project/components/AppContainer').default })
+      import('./project/components/AppContainer').then(i =>
+        callback(null, { component: i.default })
       );
     }
   }
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/routes.js b/server/sonar-web/src/main/js/apps/projectActivity/routes.js
index e11d7fbe8b4..11233a7368b 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/routes.js
+++ b/server/sonar-web/src/main/js/apps/projectActivity/routes.js
@@ -20,8 +20,8 @@
 const routes = [
   {
     getIndexRoute(_, callback) {
-      require.ensure([], require =>
-        callback(null, { component: require('./components/ProjectActivityAppContainer').default })
+      import('./components/ProjectActivityAppContainer').then(i =>
+        callback(null, { component: i.default })
       );
     }
   }
diff --git a/server/sonar-web/src/main/js/apps/projects-admin/routes.js b/server/sonar-web/src/main/js/apps/projects-admin/routes.js
index 6ca2206f863..d17958371b6 100644
--- a/server/sonar-web/src/main/js/apps/projects-admin/routes.js
+++ b/server/sonar-web/src/main/js/apps/projects-admin/routes.js
@@ -20,12 +20,12 @@
 const routes = [
   {
     getIndexRoute(_, callback) {
-      require.ensure([], require => {
-        const AppContainer = require('./AppContainer').default;
-        const forSingleOrganization = require('../organizations/forSingleOrganization').default;
-        const component = forSingleOrganization(AppContainer);
-        callback(null, { component });
-      });
+      Promise.all([
+        import('./AppContainer').then(i => i.default),
+        import('../organizations/forSingleOrganization').then(i => i.default)
+      ]).then(([AppContainer, forSingleOrganization]) =>
+        callback(null, { component: forSingleOrganization(AppContainer) })
+      );
     }
   }
 ];
diff --git a/server/sonar-web/src/main/js/apps/projects/routes.js b/server/sonar-web/src/main/js/apps/projects/routes.js
index 8c67972c076..1c3c76cc3d4 100644
--- a/server/sonar-web/src/main/js/apps/projects/routes.js
+++ b/server/sonar-web/src/main/js/apps/projects/routes.js
@@ -22,13 +22,13 @@ import { saveAll } from '../../helpers/storage';
 const routes = [
   {
     getComponent(_, callback) {
-      require.ensure([], require => callback(null, require('./components/App').default));
+      import('./components/App').then(i => callback(null, i.default));
     },
     childRoutes: [
       {
         getIndexRoute(_, callback) {
-          require.ensure([], require =>
-            callback(null, { component: require('./components/DefaultPageSelector').default })
+          import('./components/DefaultPageSelector').then(i =>
+            callback(null, { component: i.default })
           );
         }
       },
@@ -42,9 +42,7 @@ const routes = [
       {
         path: 'favorite',
         getComponent(_, callback) {
-          require.ensure([], require =>
-            callback(null, require('./components/FavoriteProjectsContainer').default)
-          );
+          import('./components/FavoriteProjectsContainer').then(i => callback(null, i.default));
         }
       }
     ]
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/routes.js b/server/sonar-web/src/main/js/apps/quality-gates/routes.js
index 495278f0d0a..8664f1f39bb 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/routes.js
+++ b/server/sonar-web/src/main/js/apps/quality-gates/routes.js
@@ -20,24 +20,18 @@
 const routes = [
   {
     getComponent(_, callback) {
-      require.ensure([], require =>
-        callback(null, require('./containers/QualityGatesAppContainer').default)
-      );
+      import('./containers/QualityGatesAppContainer').then(i => callback(null, i.default));
     },
     childRoutes: [
       {
         getIndexRoute(_, callback) {
-          require.ensure([], require =>
-            callback(null, { component: require('./components/Intro').default })
-          );
+          import('./components/Intro').then(i => callback(null, { component: i.default }));
         }
       },
       {
         path: 'show/:id',
         getComponent(_, callback) {
-          require.ensure([], require =>
-            callback(null, require('./containers/DetailsContainer').default)
-          );
+          import('./containers/DetailsContainer').then(i => callback(null, i.default));
         }
       }
     ]
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/routes.js b/server/sonar-web/src/main/js/apps/quality-profiles/routes.js
index 4c53b80384f..1d7b96fe647 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/routes.js
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/routes.js
@@ -22,51 +22,41 @@ import { withRouter } from 'react-router';
 const routes = [
   {
     getComponent(state, callback) {
-      require.ensure([], require => {
-        const AppContainer = require('./components/AppContainer').default;
+      import('./components/AppContainer').then(i => i.default).then(AppContainer => {
         if (state.params.organizationKey) {
           callback(null, AppContainer);
         } else {
-          const forSingleOrganization = require('../organizations/forSingleOrganization').default;
-          callback(null, forSingleOrganization(AppContainer));
+          import('../organizations/forSingleOrganization')
+            .then(i => i.default)
+            .then(forSingleOrganization => callback(null, forSingleOrganization(AppContainer)));
         }
       });
     },
     getIndexRoute(_, callback) {
-      require.ensure([], require => {
-        callback(null, { component: require('./home/HomeContainer').default });
-      });
+      import('./home/HomeContainer').then(i => callback(null, { component: i.default }));
     },
     childRoutes: [
       {
         getComponent(_, callback) {
-          require.ensure([], require => {
-            callback(null, withRouter(require('./components/ProfileContainer').default));
-          });
+          import('./components/ProfileContainer').then(i => callback(null, withRouter(i.default)));
         },
         childRoutes: [
           {
             path: 'show',
             getComponent(_, callback) {
-              require.ensure([], require => {
-                callback(null, require('./details/ProfileDetails').default);
-              });
+              import('./details/ProfileDetails').then(i => callback(null, i.default));
             }
           },
           {
             path: 'changelog',
             getComponent(_, callback) {
-              require.ensure([], require => {
-                callback(null, require('./changelog/ChangelogContainer').default);
-              });
+              import('./changelog/ChangelogContainer').then(i => callback(null, i.default));
             }
           },
           {
             path: 'compare',
             getComponent(_, callback) {
-              require.ensure([], require => {
-                callback(null, require('./compare/ComparisonContainer').default);
-              });
+              import('./compare/ComparisonContainer').then(i => callback(null, i.default));
             }
           }
         ]
diff --git a/server/sonar-web/src/main/js/apps/sessions/routes.js b/server/sonar-web/src/main/js/apps/sessions/routes.js
index 957fb2a7207..32e367c391f 100644
--- a/server/sonar-web/src/main/js/apps/sessions/routes.js
+++ b/server/sonar-web/src/main/js/apps/sessions/routes.js
@@ -21,25 +21,19 @@ const routes = [
   {
     path: 'new',
     getComponent(_, callback) {
-      require.ensure([], require => {
-        callback(null, require('./components/LoginFormContainer').default);
-      });
+      import('./components/LoginFormContainer').then(i => callback(null, i.default));
     }
   },
   {
     path: 'logout',
     getComponent(_, callback) {
-      require.ensure([], require => {
-        callback(null, require('./components/Logout').default);
-      });
+      import('./components/Logout').then(i => callback(null, i.default));
     }
   },
   {
     path: 'unauthorized',
     getComponent(_, callback) {
-      require.ensure([], require => {
-        callback(null, require('./components/Unauthorized').default);
-      });
+      import('./components/Unauthorized').then(i => callback(null, i.default));
     }
   }
 ];
diff --git a/server/sonar-web/src/main/js/apps/settings/routes.js b/server/sonar-web/src/main/js/apps/settings/routes.js
index 68300e6d2c8..9a408f19fe8 100644
--- a/server/sonar-web/src/main/js/apps/settings/routes.js
+++ b/server/sonar-web/src/main/js/apps/settings/routes.js
@@ -20,33 +20,25 @@
 const routes = [
   {
     getIndexRoute(_, callback) {
-      require.ensure([], require => {
-        callback(null, { component: require('./components/AppContainer').default });
-      });
+      import('./components/AppContainer').then(i => callback(null, { component: i.default }));
     }
   },
   {
     path: 'licenses',
     getComponent(_, callback) {
-      require.ensure([], require => {
-        callback(null, require('./licenses/LicensesApp').default);
-      });
+      import('./licenses/LicensesApp').then(i => callback(null, i.default));
     }
   },
   {
     path: 'encryption',
     getComponent(_, callback) {
-      require.ensure([], require => {
-        callback(null, require('./encryption/EncryptionAppContainer').default);
-      });
+      import('./encryption/EncryptionAppContainer').then(i => callback(null, i.default));
     }
   },
   {
     path: 'server_id',
     getComponent(_, callback) {
-      require.ensure([], require => {
-        callback(null, require('./serverId/ServerIdAppContainer').default);
-      });
+      import('./serverId/ServerIdAppContainer').then(i => callback(null, i.default));
     }
   }
 ];
diff --git a/server/sonar-web/src/main/js/apps/system/routes.js b/server/sonar-web/src/main/js/apps/system/routes.js
index 454ff5127fa..0ab080a46f4 100644
--- a/server/sonar-web/src/main/js/apps/system/routes.js
+++ b/server/sonar-web/src/main/js/apps/system/routes.js
@@ -20,7 +20,7 @@
 const routes = [
   {
     getIndexRoute(_, callback) {
-      require.ensure([], require => callback(null, { component: require('./main').default }));
+      import('./main').then(i => callback(null, { component: i.default }));
     }
   }
 ];
diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/OnboardingModal.js b/server/sonar-web/src/main/js/apps/tutorials/onboarding/OnboardingModal.js
index 7ae51334755..a402d0bdb58 100644
--- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/OnboardingModal.js
+++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/OnboardingModal.js
@@ -37,10 +37,7 @@ export default class OnboardingModal extends React.PureComponent {
 
   componentDidMount() {
     this.mounted = true;
-    // $FlowFixMe
-    require.ensure([], require => {
-      this.receiveComponent(require('./OnboardingContainer').default);
-    });
+    import('./OnboardingContainer').then(i => this.receiveComponent(i.default));
   }
 
   componentWillUnmount() {
diff --git a/server/sonar-web/src/main/js/apps/update-center/routes.js b/server/sonar-web/src/main/js/apps/update-center/routes.js
index e4d9cb18015..81c884ae5d6 100644
--- a/server/sonar-web/src/main/js/apps/update-center/routes.js
+++ b/server/sonar-web/src/main/js/apps/update-center/routes.js
@@ -20,41 +20,33 @@
 const routes = [
   {
     getIndexRoute(_, callback) {
-      require.ensure([], require =>
-        callback(null, { component: require('./components/UpdateCenterAppContainer').default })
+      import('./components/UpdateCenterAppContainer').then(i =>
+        callback(null, { component: i.default })
       );
     }
   },
   {
     path: 'installed',
     getComponent(_, callback) {
-      require.ensure([], require =>
-        callback(null, require('./components/UpdateCenterAppContainer').default)
-      );
+      import('./components/UpdateCenterAppContainer').then(i => callback(null, i.default));
     }
   },
   {
     path: 'updates',
     getComponent(_, callback) {
-      require.ensure([], require =>
-        callback(null, require('./components/UpdateCenterAppContainer').default)
-      );
+      import('./components/UpdateCenterAppContainer').then(i => callback(null, i.default));
     }
   },
   {
     path: 'available',
     getComponent(_, callback) {
-      require.ensure([], require =>
-        callback(null, require('./components/UpdateCenterAppContainer').default)
-      );
+      import('./components/UpdateCenterAppContainer').then(i => callback(null, i.default));
     }
   },
   {
     path: 'system',
     getComponent(_, callback) {
-      require.ensure([], require =>
-        callback(null, require('./components/UpdateCenterAppContainer').default)
-      );
+      import('./components/UpdateCenterAppContainer').then(i => callback(null, i.default));
     }
   }
 ];
diff --git a/server/sonar-web/src/main/js/apps/users/routes.js b/server/sonar-web/src/main/js/apps/users/routes.js
index e83f23c64b5..b07c3c9c5c2 100644
--- a/server/sonar-web/src/main/js/apps/users/routes.js
+++ b/server/sonar-web/src/main/js/apps/users/routes.js
@@ -20,9 +20,7 @@
 const routes = [
   {
     getIndexRoute(_, callback) {
-      require.ensure([], require =>
-        callback(null, { component: require('./components/UsersAppContainer').default })
-      );
+      import('./components/UsersAppContainer').then(i => callback(null, { component: i.default }));
     }
   }
 ];
diff --git a/server/sonar-web/src/main/js/apps/web-api/routes.js b/server/sonar-web/src/main/js/apps/web-api/routes.js
index a27df0a1e5c..5993b47eea4 100644
--- a/server/sonar-web/src/main/js/apps/web-api/routes.js
+++ b/server/sonar-web/src/main/js/apps/web-api/routes.js
@@ -20,15 +20,13 @@
 const routes = [
   {
     getIndexRoute(_, callback) {
-      require.ensure([], require =>
-        callback(null, { component: require('./components/WebApiApp').default })
-      );
+      import('./components/WebApiApp').then(i => callback(null, { component: i.default }));
     }
   },
   {
     path: '**',
     getComponent(_, callback) {
-      require.ensure([], require => callback(null, require('./components/WebApiApp').default));
+      import('./components/WebApiApp').then(i => callback(null, i.default));
     }
   }
 ];
diff --git a/server/sonar-web/yarn.lock b/server/sonar-web/yarn.lock
index b130cf318b3..40419b19538 100644
--- a/server/sonar-web/yarn.lock
+++ b/server/sonar-web/yarn.lock
@@ -324,15 +324,14 @@ babel-core@^6.0.0, babel-core@^6.22.0, babel-core@^6.22.1:
     slash "^1.0.0"
     source-map "^0.5.0"
 
-babel-eslint@6.1.2:
-  version "6.1.2"
-  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-6.1.2.tgz#5293419fe3672d66598d327da9694567ba6a5f2f"
+babel-eslint@7.2.3:
+  version "7.2.3"
+  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-7.2.3.tgz#b2fe2d80126470f5c19442dc757253a897710827"
   dependencies:
-    babel-traverse "^6.0.20"
-    babel-types "^6.0.19"
-    babylon "^6.0.18"
-    lodash.assign "^4.0.0"
-    lodash.pickby "^4.0.0"
+    babel-code-frame "^6.22.0"
+    babel-traverse "^6.23.1"
+    babel-types "^6.23.0"
+    babylon "^6.17.0"
 
 babel-generator@^6.18.0, babel-generator@^6.22.0:
   version "6.22.0"
@@ -472,18 +471,32 @@ babel-loader@7.0.0:
     loader-utils "^1.0.2"
     mkdirp "^0.5.1"
 
-babel-messages@^6.22.0, babel-messages@^6.8.0:
+babel-messages@^6.22.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.22.0.tgz#36066a214f1217e4ed4164867669ecb39e3ea575"
   dependencies:
     babel-runtime "^6.22.0"
 
+babel-messages@^6.23.0, babel-messages@^6.8.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e"
+  dependencies:
+    babel-runtime "^6.22.0"
+
 babel-plugin-check-es2015-constants@^6.3.13:
   version "6.8.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-check-es2015-constants/-/babel-plugin-check-es2015-constants-6.8.0.tgz#dbf024c32ed37bfda8dee1e76da02386a8d26fe7"
   dependencies:
     babel-runtime "^6.0.0"
 
+babel-plugin-dynamic-import-node@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-1.0.2.tgz#adb5bc8f48a89311540395ae9f0cc3ed4b10bb2e"
+  dependencies:
+    babel-plugin-syntax-dynamic-import "^6.18.0"
+    babel-template "^6.24.1"
+    babel-types "^6.24.1"
+
 babel-plugin-istanbul@^4.0.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.1.tgz#c12de0fc6fe42adfb16be56f1ad11e4a9782eca9"
@@ -504,6 +517,10 @@ babel-plugin-syntax-class-properties@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz#d7eb23b79a317f8543962c505b827c7d6cac27de"
 
+babel-plugin-syntax-dynamic-import@6.18.0, babel-plugin-syntax-dynamic-import@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz#8d6a26229c83745a9982a441051572caa179b1da"
+
 babel-plugin-syntax-exponentiation-operator@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de"
@@ -864,7 +881,17 @@ babel-runtime@^6.11.6, babel-runtime@^6.22.0:
     core-js "^2.4.0"
     regenerator-runtime "^0.10.0"
 
-babel-template@^6.14.0, babel-template@^6.15.0, babel-template@^6.16.0, babel-template@^6.22.0, babel-template@^6.8.0:
+babel-template@^6.14.0, babel-template@^6.15.0, babel-template@^6.16.0, babel-template@^6.24.1, babel-template@^6.8.0:
+  version "6.25.0"
+  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.25.0.tgz#665241166b7c2aa4c619d71e192969552b10c071"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-traverse "^6.25.0"
+    babel-types "^6.25.0"
+    babylon "^6.17.2"
+    lodash "^4.2.0"
+
+babel-template@^6.22.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.22.0.tgz#403d110905a4626b317a2a1fcb8f3b73204b2edb"
   dependencies:
@@ -874,7 +901,21 @@ babel-template@^6.14.0, babel-template@^6.15.0, babel-template@^6.16.0, babel-te
     babylon "^6.11.0"
     lodash "^4.2.0"
 
-babel-traverse@^6.0.20, babel-traverse@^6.18.0, babel-traverse@^6.20.0, babel-traverse@^6.21.0, babel-traverse@^6.22.0, babel-traverse@^6.22.1:
+babel-traverse@^6.18.0, babel-traverse@^6.20.0, babel-traverse@^6.21.0, babel-traverse@^6.22.0, babel-traverse@^6.23.1, babel-traverse@^6.25.0:
+  version "6.25.0"
+  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.25.0.tgz#2257497e2fcd19b89edc13c4c91381f9512496f1"
+  dependencies:
+    babel-code-frame "^6.22.0"
+    babel-messages "^6.23.0"
+    babel-runtime "^6.22.0"
+    babel-types "^6.25.0"
+    babylon "^6.17.2"
+    debug "^2.2.0"
+    globals "^9.0.0"
+    invariant "^2.2.0"
+    lodash "^4.2.0"
+
+babel-traverse@^6.22.1:
   version "6.22.1"
   resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.22.1.tgz#3b95cd6b7427d6f1f757704908f2fc9748a5f59f"
   dependencies:
@@ -888,7 +929,16 @@ babel-traverse@^6.0.20, babel-traverse@^6.18.0, babel-traverse@^6.20.0, babel-tr
     invariant "^2.2.0"
     lodash "^4.2.0"
 
-babel-types@^6.0.19, babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.20.0, babel-types@^6.21.0, babel-types@^6.22.0, babel-types@^6.8.0, babel-types@^6.9.0:
+babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.20.0, babel-types@^6.21.0, babel-types@^6.23.0, babel-types@^6.24.1, babel-types@^6.25.0, babel-types@^6.8.0, babel-types@^6.9.0:
+  version "6.25.0"
+  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.25.0.tgz#70afb248d5660e5d18f811d91c8303b54134a18e"
+  dependencies:
+    babel-runtime "^6.22.0"
+    esutils "^2.0.2"
+    lodash "^4.2.0"
+    to-fast-properties "^1.0.1"
+
+babel-types@^6.22.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.22.0.tgz#2a447e8d0ea25d2512409e4175479fd78cc8b1db"
   dependencies:
@@ -901,9 +951,9 @@ babylon@^6.0.18, babylon@^6.11.0:
   version "6.14.1"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.14.1.tgz#956275fab72753ad9b3435d7afe58f8bf0a29815"
 
-babylon@^6.13.0, babylon@^6.15.0:
-  version "6.15.0"
-  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.15.0.tgz#ba65cfa1a80e1759b0e89fb562e27dccae70348e"
+babylon@^6.13.0, babylon@^6.15.0, babylon@^6.17.0, babylon@^6.17.2:
+  version "6.17.4"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.17.4.tgz#3e8b7402b88d22c3423e137a1577883b15ff869a"
 
 backbone.babysitter@^0.1.0:
   version "0.1.12"
@@ -3777,7 +3827,7 @@ lodash._getnative@^3.0.0:
   version "3.9.1"
   resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
 
-lodash.assign@^4.0.0, lodash.assign@^4.2.0:
+lodash.assign@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
 
@@ -3857,10 +3907,6 @@ lodash.pick@^4.2.1:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.pick/-/lodash.pick-4.4.0.tgz#52f05610fff9ded422611441ed1fc123a03001b3"
 
-lodash.pickby@^4.0.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/lodash.pickby/-/lodash.pickby-4.6.0.tgz#7dea21d8c18d7703a27c704c15d3b84a67e33aff"
-
 lodash.reduce@^4.4.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.reduce/-/lodash.reduce-4.6.0.tgz#f1ab6b839299ad48f784abbf476596f03b914d3b"