optimize js bundles (#1855)

server/sonar-web/.eslintrc

@@ -12,7 +12,6 @@
 
   "globals": {
     "key": true,
-    "d3": true,
     "baseUrl": true,
     "SyntheticInputEvent": true
   },

server/sonar-web/config/webpack/webpack.config.base.js

@@ -7,25 +7,36 @@ var autoprefixerOptions = require('../autoprefixer');
 
 module.exports = {
   entry: {
-    'vendor': [
+    vendor: [
       require.resolve('../polyfills'),
       'jquery',
       'underscore',
-      'd3',
+      'lodash',
+      'd3-array',
+      'd3-hierarchy',
+      'd3-scale',
+      'd3-selection',
+      'd3-shape',
       'react',
       'react-dom',
       'backbone',
       'backbone.marionette',
       'moment',
-      'handlebars/runtime'
+      'handlebars/runtime',
+      './src/main/js/libs/third-party/jquery-ui.js',
+      './src/main/js/libs/third-party/select2.js',
+      './src/main/js/libs/third-party/keymaster.js',
+      './src/main/js/libs/third-party/bootstrap/tooltip.js',
+      './src/main/js/libs/third-party/bootstrap/dropdown.js'
     ],
 
-    'app': './src/main/js/app/index.js'
+    app: ['./src/main/js/app/index.js', './src/main/js/components/SourceViewer/SourceViewer.js']
   },
   output: {
     path: paths.appBuild,
+    publicPath: '/',
     filename: 'js/[name].[chunkhash:8].js',
-    chunkFilename: 'js/[name].[chunkhash:8].chunk.js',
+    chunkFilename: 'js/[name].[chunkhash:8].chunk.js'
   },
   resolve: {
     // This allows you to set a fallback for where Webpack should look for modules.
@@ -49,7 +60,7 @@ module.exports = {
       {
         test: /\.js$/,
         loader: 'babel',
-        exclude: /(node_modules|libs)/,
+        exclude: /(node_modules|libs)/
       },
       {
         test: /(blueimp-md5|numeral)/,
@@ -74,12 +85,11 @@ module.exports = {
       { test: require.resolve('underscore'), loader: 'expose?_' },
       { test: require.resolve('backbone'), loader: 'expose?Backbone' },
       { test: require.resolve('backbone.marionette'), loader: 'expose?Marionette' },
-      { test: require.resolve('d3'), loader: 'expose?d3' },
       { test: require.resolve('react'), loader: 'expose?React' },
       { test: require.resolve('react-dom'), loader: 'expose?ReactDOM' }
     ]
   },
-  postcss: function () {
+  postcss: function() {
     return [autoprefixer(autoprefixerOptions)];
   },
   // Some libraries import Node modules but don't use them in the browser.

server/sonar-web/config/webpack/webpack.config.dev.js

@@ -27,7 +27,6 @@ var paths = require('../paths');
 var config = require('./webpack.config.base');
 var getClientEnvironment = require('../env');
 
-var publicPath = '';
 var webContext = '';
 var env = getClientEnvironment();
 
@@ -53,7 +52,6 @@ config.entry.vendor.unshift(require.resolve('react-dev-utils/webpackHotDevClient
 config.output.pathinfo = true;
 
 // This is the URL that app is served from.
-config.output.publicPath = publicPath;
 config.output.filename = 'js/[name].js';
 config.output.chunkFilename = 'js/[name].chunk.js';
 
@@ -72,7 +70,7 @@ config.plugins = [
   // Generates an `index.html` file with the <script> injected.
   new HtmlWebpackPlugin({
     inject: false,
-    template: paths.appHtml,
+    template: paths.appHtml
   }),
 
   // Makes some environment variables available to the JS code, for example:

server/sonar-web/package.json

@@ -11,7 +11,11 @@
     "blueimp-md5": "1.1.1",
     "classnames": "2.2.0",
     "clipboard": "1.5.5",
-    "d3": "3.5.6",
+    "d3-array": "1.1.1",
+    "d3-hierarchy": "1.1.4",
+    "d3-scale": "1.0.5",
+    "d3-selection": "1.0.5",
+    "d3-shape": "1.0.6",
     "escape-html": "1.0.3",
     "handlebars": "2.0.0",
     "history": "2.0.0",
@@ -95,6 +99,7 @@
     "strip-ansi": "3.0.1",
     "style-loader": "0.13.0",
     "webpack": "1.13.2",
+    "webpack-bundle-analyzer": "^2.3.1",
     "webpack-dev-server": "1.16.1"
   },
   "scripts": {
@@ -139,4 +144,4 @@
       "<rootDir>/scripts"
     ]
   }
-}
+}

server/sonar-web/public/index.html

@@ -23,7 +23,7 @@
     <meta name="msapplication-TileImage" content="%WEB_CONTEXT%/mstile-512x512.png" />
 
     <% for (var css in htmlWebpackPlugin.files.css) { %>
-    <link href="%WEB_CONTEXT%/<%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
+    <link href="%WEB_CONTEXT%<%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
     <% } %>
     <title>SonarQube</title>
   </head>
@@ -31,7 +31,7 @@
     <div id="content"></div>
     <script>window.baseUrl = '%WEB_CONTEXT%';</script>
     <% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
-    <script src="%WEB_CONTEXT%/<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
+    <script src="%WEB_CONTEXT%<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
     <% } %>
   </body>
 </html>

server/sonar-web/scripts/analyze.js

@@ -0,0 +1,33 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2017 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+process.env.NODE_ENV = 'production';
+
+const webpack = require('webpack');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const config = require('../config/webpack/webpack.config.prod');
+
+config.plugins.push(new BundleAnalyzerPlugin());
+
+webpack(config, err => {
+  if (err) {
+    console.log(err.message || err);
+    process.exit(1);
+  }
+});

server/sonar-web/src/main/js/api/settings.js

@@ -17,7 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import omitBy from 'lodash/omitBy';
+import { omitBy } from 'lodash';
 import { getJSON, post, postJSON } from '../helpers/request';
 import { TYPE_PROPERTY_SET } from '../apps/settings/constants';
 

server/sonar-web/src/main/js/app/components/nav/global/SearchView.js

@@ -20,8 +20,7 @@
 // @flow
 import Backbone from 'backbone';
 import Marionette from 'backbone.marionette';
-import debounce from 'lodash/debounce';
-import sortBy from 'lodash/sortBy';
+import { debounce, sortBy } from 'lodash';
 import SelectableCollectionView from '../../../../components/common/selectable-collection-view';
 import SearchItemTemplate from '../templates/nav-search-item.hbs';
 import EmptySearchTemplate from '../templates/nav-search-empty.hbs';

server/sonar-web/src/main/js/app/index.js

@@ -25,11 +25,6 @@ import installExtensionsHandler from './utils/installExtensionsHandler';
 import { installGlobal } from '../helpers/l10n';
 import './styles/index';
 
-require('script!../libs/third-party/jquery-ui.js');
-require('script!../libs/third-party/select2.js');
-require('script!../libs/third-party/keymaster.js');
-require('script!../libs/third-party/bootstrap/tooltip.js');
-require('script!../libs/third-party/bootstrap/dropdown.js');
 require('script!../libs/select2-jquery-ui-fix.js');
 require('script!../libs/inputs.js');
 require('script!../libs/jquery-isolated-scroll.js');

server/sonar-web/src/main/js/app/utils/startAjaxMonitoring.js

@@ -21,7 +21,7 @@ import $ from 'jquery';
 import Backbone from 'backbone';
 import Marionette from 'backbone.marionette';
 import escapeHtml from 'escape-html';
-import uniqueId from 'lodash/uniqueId';
+import { uniqueId } from 'lodash';
 import { translate } from '../../helpers/l10n';
 import { getCSRFTokenName, getCSRFTokenValue } from '../../helpers/request';
 

server/sonar-web/src/main/js/app/utils/startReactApp.js

@@ -51,7 +51,7 @@ import groupsRoutes from '../../apps/groups/routes';
 import issuesRoutes from '../../apps/issues/routes';
 import metricsRoutes from '../../apps/metrics/routes';
 import overviewRoutes from '../../apps/overview/routes';
-import organizationsRouters from '../../apps/organizations/routes';
+import organizationsRoutes from '../../apps/organizations/routes';
 import permissionTemplatesRoutes from '../../apps/permission-templates/routes';
 import projectActivityRoutes from '../../apps/projectActivity/routes';
 import projectAdminRoutes from '../../apps/project-admin/routes';
@@ -87,6 +87,21 @@ const startReactApp = () => {
   render(
     <Provider store={store}>
       <Router history={history} onUpdate={handleUpdate}>
+        <Route
+          path="/account/issues"
+          onEnter={() => {
+            const defaultFilter = window.location.hash || '#resolve=false';
+            window.location = `${window.baseUrl}/issues${defaultFilter}|assigned_to_me=true`;
+          }}
+        />
+
+        <Route
+          path="/codingrules"
+          onEnter={(nextState, replace) => {
+            replace('/coding_rules' + window.location.hash);
+          }}
+        />
+
         <Route
           path="/dashboard/index/:key"
           onEnter={(nextState, replace) => {
@@ -94,7 +109,21 @@ const startReactApp = () => {
           }}
         />
 
+        <Route
+          path="/issues/search"
+          onEnter={(nextState, replace) => {
+            replace('/issues' + window.location.hash);
+          }}
+        />
+
+        <Redirect from="/component/index" to="/component" />
+        <Redirect from="/dashboard/index" to="/dashboard" />
+        <Redirect from="/governance" to="/view" />
         <Redirect from="/extension/governance/portfolios" to="/portfolios" />
+        <Redirect from="/profiles/index" to="/profiles" />
+        <Redirect from="/quality_gates/index" to="/quality_gates" />
+        <Redirect from="/settings/index" to="/settings" />
+        <Redirect from="/system/index" to="/system" />
 
         <Route path="markdown/help" component={MarkdownHelp} />
 
@@ -114,34 +143,27 @@ const startReactApp = () => {
               <IndexRoute component={Landing} />
 
               <Route component={GlobalContainer}>
-                <Route path="about">{aboutRoutes}</Route>
-                <Route path="account">{accountRoutes}</Route>
-                <Route
-                  path="codingrules"
-                  onEnter={(nextState, replace) => {
-                    replace('/coding_rules' + window.location.hash);
-                  }}
-                />
-                <Route path="coding_rules">{codingRulesRoutes}</Route>
-                <Route path="component">{componentRoutes}</Route>
+                <Route path="about" childRoutes={aboutRoutes} />
+                <Route path="account" childRoutes={accountRoutes} />
+                <Route path="coding_rules" childRoutes={codingRulesRoutes} />
+                <Route path="component" childRoutes={componentRoutes} />
                 <Route path="extension/:pluginKey/:extensionKey" component={GlobalPageExtension} />
-                <Route path="issues">{issuesRoutes}</Route>
-                <Route path="organizations">{organizationsRouters}</Route>
-                <Route path="projects">{projectsRoutes}</Route>
-                <Route path="quality_gates">{qualityGatesRoutes}</Route>
+                <Route path="issues" childRoutes={issuesRoutes} />
+                <Route path="organizations" childRoutes={organizationsRoutes} />
+                <Route path="projects" childRoutes={projectsRoutes} />
+                <Route path="quality_gates" childRoutes={qualityGatesRoutes} />
                 <Route path="portfolios" component={PortfoliosPage} />
-                <Route path="profiles">{qualityProfilesRoutes}</Route>
-                <Route path="web_api">{webAPIRoutes}</Route>
+                <Route path="profiles" childRoutes={qualityProfilesRoutes} />
+                <Route path="web_api" childRoutes={webAPIRoutes} />
 
                 <Route component={ProjectContainer}>
-                  <Route path="code">{codeRoutes}</Route>
-                  <Route path="component_issues">{componentIssuesRoutes}</Route>
-                  <Route path="component_measures">{componentMeasuresRoutes}</Route>
-                  <Route path="custom_measures">{customMeasuresRoutes}</Route>
-                  <Route path="dashboard">{overviewRoutes}</Route>
-                  <Redirect from="governance" to="/view" />
+                  <Route path="code" childRoutes={codeRoutes} />
+                  <Route path="component_issues" childRoutes={componentIssuesRoutes} />
+                  <Route path="component_measures" childRoutes={componentMeasuresRoutes} />
+                  <Route path="custom_measures" childRoutes={customMeasuresRoutes} />
+                  <Route path="dashboard" childRoutes={overviewRoutes} />
                   <Route path="project">
-                    <Route path="activity">{projectActivityRoutes}</Route>
+                    <Route path="activity" childRoutes={projectActivityRoutes} />
                     <Route path="admin" component={ProjectAdminContainer}>
                       <Route
                         path="extension/:pluginKey/:extensionKey"
@@ -153,11 +175,11 @@ const startReactApp = () => {
                       path="extension/:pluginKey/:extensionKey"
                       component={ProjectPageExtension}
                     />
-                    <Route path="background_tasks">{backgroundTasksRoutes}</Route>
-                    <Route path="settings">{settingsRoutes}</Route>
+                    <Route path="background_tasks" childRoutes={backgroundTasksRoutes} />
+                    <Route path="settings" childRoutes={settingsRoutes} />
                     {projectAdminRoutes}
                   </Route>
-                  <Route path="project_roles">{projectPermissionsRoutes}</Route>
+                  <Route path="project_roles" childRoutes={projectPermissionsRoutes} />
                   <Route path="view" component={ViewDashboard} />
                 </Route>
 
@@ -166,16 +188,16 @@ const startReactApp = () => {
                     path="admin/extension/:pluginKey/:extensionKey"
                     component={GlobalAdminPageExtension}
                   />
-                  <Route path="background_tasks">{backgroundTasksRoutes}</Route>
-                  <Route path="groups">{groupsRoutes}</Route>
-                  <Route path="metrics">{metricsRoutes}</Route>
-                  <Route path="permission_templates">{permissionTemplatesRoutes}</Route>
-                  <Route path="projects_admin">{projectsAdminRoutes}</Route>
-                  <Route path="roles/global">{globalPermissionsRoutes}</Route>
-                  <Route path="settings">{settingsRoutes}</Route>
-                  <Route path="system">{systemRoutes}</Route>
-                  <Route path="updatecenter">{updateCenterRoutes}</Route>
-                  <Route path="users">{usersRoutes}</Route>
+                  <Route path="background_tasks" childRoutes={backgroundTasksRoutes} />
+                  <Route path="groups" childRoutes={groupsRoutes} />
+                  <Route path="metrics" childRoutes={metricsRoutes} />
+                  <Route path="permission_templates" childRoutes={permissionTemplatesRoutes} />
+                  <Route path="projects_admin" childRoutes={projectsAdminRoutes} />
+                  <Route path="roles/global" childRoutes={globalPermissionsRoutes} />
+                  <Route path="settings" childRoutes={settingsRoutes} />
+                  <Route path="system" childRoutes={systemRoutes} />
+                  <Route path="updatecenter" childRoutes={updateCenterRoutes} />
+                  <Route path="users" childRoutes={usersRoutes} />
                 </Route>
               </Route>
 

server/sonar-web/src/main/js/apps/about/components/AboutApp.js

@@ -20,7 +20,7 @@
 // @flow
 import React from 'react';
 import { connect } from 'react-redux';
-import keyBy from 'lodash/keyBy';
+import { keyBy } from 'lodash';
 import { Link } from 'react-router';
 import AboutProjects from './AboutProjects';
 import EntryIssueTypes from './EntryIssueTypes';
@@ -43,7 +43,7 @@ type State = {
   loading: boolean,
   projectsCount?: number,
   issueTypes?: {
-    [key: string]: {
+    [key: string]: ?{
       count: number
     }
   }
@@ -140,8 +140,7 @@ class AboutApp extends React.Component {
               <a
                 className="button"
                 href="https://redirect.sonarsource.com/doc/home.html"
-                target="_blank"
-              >
+                target="_blank">
                 {translate('about_page.read_documentation')}
               </a>
             </div>

server/sonar-web/src/main/js/apps/about/routes.js

@@ -17,8 +17,13 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import React from 'react';
-import { IndexRoute } from 'react-router';
-import AboutApp from './components/AboutApp';
+const routes = [
+  {
+    getIndexRoute(_, callback) {
+      require.ensure([], require =>
+        callback(null, { component: require('./components/AboutApp').default }));
+    }
+  }
+];
 
-export default <IndexRoute component={AboutApp} />;
+export default routes;

server/sonar-web/src/main/js/apps/account/notifications/Projects.js

@@ -20,7 +20,7 @@
 import React from 'react';
 import Select from 'react-select';
 import { connect } from 'react-redux';
-import differenceBy from 'lodash/differenceBy';
+import { differenceBy } from 'lodash';
 import ProjectNotifications from './ProjectNotifications';
 import Organization from '../../../components/shared/Organization';
 import { translate } from '../../../helpers/l10n';

server/sonar-web/src/main/js/apps/account/organizations/CreateOrganizationForm.js

@@ -20,7 +20,7 @@
 // @flow
 import React from 'react';
 import Modal from 'react-modal';
-import debounce from 'lodash/debounce';
+import { debounce } from 'lodash';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router';
 import { translate } from '../../../helpers/l10n';

server/sonar-web/src/main/js/apps/account/projects/ProjectCard.js

@@ -19,7 +19,7 @@
  */
 import React from 'react';
 import moment from 'moment';
-import sortBy from 'lodash/sortBy';
+import { sortBy } from 'lodash';
 import { Link } from 'react-router';
 import Level from '../../../components/ui/Level';
 import { projectType } from './propTypes';

server/sonar-web/src/main/js/apps/account/routes.js

@@ -17,34 +17,56 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import React from 'react';
-import { Route, IndexRoute } from 'react-router';
-import Account from './components/Account';
-import ProjectsContainer from './projects/ProjectsContainer';
-import Security from './components/Security';
-import Profile from './profile/Profile';
-import Notifications from './notifications/Notifications';
-import UserOrganizations from './organizations/UserOrganizations';
-import CreateOrganizationForm from './organizations/CreateOrganizationForm';
+const routes = [
+  {
+    getComponent(_, callback) {
+      require.ensure([], require => callback(null, require('./components/Account').default));
+    },
+    childRoutes: [
+      {
+        getIndexRoute(_, callback) {
+          require.ensure([], require =>
+            callback(null, { component: require('./profile/Profile').default }));
+        }
+      },
+      {
+        path: 'security',
+        getComponent(_, callback) {
+          require.ensure([], require => callback(null, require('./components/Security').default));
+        }
+      },
+      {
+        path: 'projects',
+        getComponent(_, callback) {
+          require.ensure([], require =>
+            callback(null, require('./projects/ProjectsContainer').default));
+        }
+      },
+      {
+        path: 'notifications',
+        getComponent(_, callback) {
+          require.ensure([], require =>
+            callback(null, require('./notifications/Notifications').default));
+        }
+      },
+      {
+        path: 'organizations',
+        getComponent(_, callback) {
+          require.ensure([], require =>
+            callback(null, require('./organizations/UserOrganizations').default));
+        },
+        childRoutes: [
+          {
+            path: 'create',
+            getComponent(_, callback) {
+              require.ensure([], require =>
+                callback(null, require('./organizations/CreateOrganizationForm').default));
+            }
+          }
+        ]
+      }
+    ]
+  }
+];
 
-export default (
-  <Route component={Account}>
-    <IndexRoute component={Profile} />
-    <Route path="security" component={Security} />
-    <Route path="projects" component={ProjectsContainer} />
-    <Route path="notifications" component={Notifications} />
-    <Route path="organizations" component={UserOrganizations}>
-      <Route path="create" component={CreateOrganizationForm} />
-    </Route>
-
-    <Route
-      path="issues"
-      onEnter={() => {
-        window.location = window.baseUrl +
-          '/issues' +
-          window.location.hash +
-          '|assigned_to_me=true';
-      }}
-    />
-  </Route>
-);
+export default routes;

server/sonar-web/src/main/js/apps/background-tasks/components/BackgroundTasksApp.js

@@ -20,8 +20,7 @@
 // @flow
 import React from 'react';
 import shallowCompare from 'react-addons-shallow-compare';
-import debounce from 'lodash/debounce';
-import uniq from 'lodash/uniq';
+import { debounce, uniq } from 'lodash';
 import { connect } from 'react-redux';
 import { DEFAULT_FILTERS, DEBOUNCE_DELAY, STATUSES, CURRENTS } from './../constants';
 import Header from './Header';

server/sonar-web/src/main/js/apps/background-tasks/routes.js

@@ -17,8 +17,13 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import React from 'react';
-import { IndexRoute } from 'react-router';
-import BackgroundTasksApp from './components/BackgroundTasksApp';
+const routes = [
+  {
+    getIndexRoute(_, callback) {
+      require.ensure([], require =>
+        callback(null, { component: require('./components/BackgroundTasksApp').default }));
+    }
+  }
+];
 
-export default <IndexRoute component={BackgroundTasksApp} />;
+export default routes;

server/sonar-web/src/main/js/apps/code/components/Search.js

@@ -20,7 +20,7 @@
 import React from 'react';
 import shallowCompare from 'react-addons-shallow-compare';
 import classNames from 'classnames';
-import debounce from 'lodash/debounce';
+import { debounce } from 'lodash';
 import Components from './Components';
 import { getTree } from '../../../api/components';
 import { translate, translateWithParameters } from '../../../helpers/l10n';

server/sonar-web/src/main/js/apps/code/routes.js

@@ -17,8 +17,13 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import React from 'react';
-import { IndexRoute } from 'react-router';
-import App from './components/App';
+const routes = [
+  {
+    getIndexRoute(_, callback) {
+      require.ensure([], require =>
+        callback(null, { component: require('./components/App').default }));
+    }
+  }
+];
 
-export default <IndexRoute component={App} />;
+export default routes;

server/sonar-web/src/main/js/apps/code/utils.js

@@ -17,7 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import without from 'lodash/without';
+import { without } from 'lodash';
 import {
   addComponent,
   getComponent as getComponentFromBucket,

server/sonar-web/src/main/js/apps/coding-rules/facets/active-severity-facet.js

@@ -17,7 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import sortBy from 'lodash/sortBy';
+import { sortBy } from 'lodash';
 import BaseFacet from './base-facet';
 import Template from '../templates/facets/coding-rules-severity-facet.hbs';
 import { translate } from '../../../helpers/l10n';

server/sonar-web/src/main/js/apps/coding-rules/facets/quality-profile-facet.js

@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import $ from 'jquery';
-import sortBy from 'lodash/sortBy';
+import { sortBy } from 'lodash';
 import BaseFacet from './base-facet';
 import Template from '../templates/facets/coding-rules-quality-profile-facet.hbs';
 

server/sonar-web/src/main/js/apps/coding-rules/facets/repository-facet.js

@@ -17,7 +17,6 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import 'lodash/object';
 import CustomValuesFacet from './custom-values-facet';
 
 export default CustomValuesFacet.extend({

server/sonar-web/src/main/js/apps/coding-rules/facets/severity-facet.js

@@ -17,7 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import sortBy from 'lodash/sortBy';
+import { sortBy } from 'lodash';
 import BaseFacet from './base-facet';
 import Template from '../templates/facets/coding-rules-severity-facet.hbs';
 

server/sonar-web/src/main/js/apps/coding-rules/facets/status-facet.js

@@ -17,7 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import sortBy from 'lodash/sortBy';
+import { sortBy } from 'lodash';
 import BaseFacet from './base-facet';
 import { translate } from '../../../helpers/l10n';
 

server/sonar-web/src/main/js/apps/coding-rules/facets/type-facet.js

@@ -17,7 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import sortBy from 'lodash/sortBy';
+import { sortBy } from 'lodash';
 import BaseFacet from './base-facet';
 import Template from '../templates/facets/coding-rules-type-facet.hbs';
 

server/sonar-web/src/main/js/apps/coding-rules/init.js

@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import $ from 'jquery';
-import sortBy from 'lodash/sortBy';
+import { sortBy } from 'lodash';
 import Backbone from 'backbone';
 import Marionette from 'backbone.marionette';
 import State from './models/state';

server/sonar-web/src/main/js/apps/coding-rules/routes.js

@@ -17,8 +17,16 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import React from 'react';
-import { IndexRoute } from 'react-router';
-import CodingRulesAppContainer from './components/CodingRulesAppContainer';
+const routes = [
+  {
+    indexRoute: {
+      getComponent(_, callback) {
+        require.ensure([], require => {
+          callback(null, require('./components/CodingRulesAppContainer').default);
+        });
+      }
+    }
+  }
+];
 
-export default <IndexRoute component={CodingRulesAppContainer} />;
+export default routes;

server/sonar-web/src/main/js/apps/coding-rules/rule-details-view.js

@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import $ from 'jquery';
-import union from 'lodash/union';
+import { union } from 'lodash';
 import Backbone from 'backbone';
 import Marionette from 'backbone.marionette';
 import Rules from './models/rules';

server/sonar-web/src/main/js/apps/coding-rules/rule-filter-view.js

@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import $ from 'jquery';
-import union from 'lodash/union';
+import { union } from 'lodash';
 import ActionOptionsView from '../../components/common/action-options-view';
 import Template from './templates/coding-rules-rule-filter-form.hbs';
 

server/sonar-web/src/main/js/apps/coding-rules/rule/rule-meta-view.js

@@ -18,8 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import $ from 'jquery';
-import difference from 'lodash/difference';
-import union from 'lodash/union';
+import { difference, union } from 'lodash';
 import Marionette from 'backbone.marionette';
 import RuleFilterMixin from './rule-filter-mixin';
 import Template from '../templates/rule/coding-rules-rule-meta.hbs';

server/sonar-web/src/main/js/apps/coding-rules/rule/rule-profile-view.js

@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import $ from 'jquery';
-import sortBy from 'lodash/sortBy';
+import { sortBy } from 'lodash';
 import Backbone from 'backbone';
 import Marionette from 'backbone.marionette';
 import ProfileActivationView from './profile-activation-view';

server/sonar-web/src/main/js/apps/coding-rules/workspace-list-item-view.js

@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import $ from 'jquery';
-import union from 'lodash/union';
+import { union } from 'lodash';
 import Backbone from 'backbone';
 import WorkspaceListItemView from '../../components/navigator/workspace-list-item-view';
 import ProfileActivationView from './rule/profile-activation-view';

server/sonar-web/src/main/js/apps/component-issues/init.js

@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import $ from 'jquery';
-import difference from 'lodash/difference';
+import { difference } from 'lodash';
 import Backbone from 'backbone';
 import Marionette from 'backbone.marionette';
 import State from '../issues/models/state';

server/sonar-web/src/main/js/apps/component-issues/routes.js

@@ -17,8 +17,15 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import React from 'react';
-import { IndexRoute } from 'react-router';
-import ComponentIssuesAppContainer from './components/ComponentIssuesAppContainer';
+const routes = [
+  {
+    indexRoute: {
+      getComponent(_, callback) {
+        require.ensure([], require =>
+          callback(null, require('./components/ComponentIssuesAppContainer').default));
+      }
+    }
+  }
+];
 
-export default <IndexRoute component={ComponentIssuesAppContainer} />;
+export default routes;

server/sonar-web/src/main/js/apps/component-measures/app/App.js

@@ -19,6 +19,7 @@
  */
 import React from 'react';
 import Spinner from './../components/Spinner';
+import '../styles.css';
 
 export default class App extends React.Component {
   state = { componentSet: false };

server/sonar-web/src/main/js/apps/component-measures/details/history/MeasureHistory.js

@@ -17,7 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import sortBy from 'lodash/sortBy';
+import { sortBy } from 'lodash';
 import moment from 'moment';
 import React from 'react';
 import Spinner from './../../components/Spinner';

server/sonar-web/src/main/js/apps/component-measures/details/treemap/MeasureTreemap.js

@@ -18,6 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import React from 'react';
+import { scaleLinear, scaleOrdinal } from 'd3-scale';
 import Spinner from './../../components/Spinner';
 import { getLeakValue } from '../../utils';
 import { Treemap } from '../../../../components/charts/treemap';
@@ -100,7 +101,7 @@ export default class MeasureTreemap extends React.Component {
     return `<div class="text-left">${inner}</div>`;
   }
   getPercentColorScale(metric) {
-    const color = d3.scale.linear().domain([0, 25, 50, 75, 100]);
+    const color = scaleLinear().domain([0, 25, 50, 75, 100]);
     color.range(
       metric.direction === 1
         ? ['#d4333f', '#ed7d20', '#eabe06', '#b0d513', '#00aa00']
@@ -109,14 +110,12 @@ export default class MeasureTreemap extends React.Component {
     return color;
   }
   getRatingColorScale() {
-    return d3.scale
-      .linear()
+    return scaleLinear()
       .domain([1, 2, 3, 4, 5])
       .range(['#00aa00', '#b0d513', '#eabe06', '#ed7d20', '#d4333f']);
   }
   getLevelColorScale() {
-    return d3.scale
-      .ordinal()
+    return scaleOrdinal()
       .domain(['ERROR', 'WARN', 'OK', 'NONE'])
       .range(['#d4333f', '#ed7d20', '#00aa00', '#b4b4b4']);
   }

server/sonar-web/src/main/js/apps/component-measures/home/HomeMeasuresList.js

@@ -18,8 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import React from 'react';
-import partition from 'lodash/partition';
-import sortBy from 'lodash/sortBy';
+import { partition, sortBy } from 'lodash';
 import MeasuresList from './MeasuresList';
 import { domains } from '../config/domains';
 import { getLocalizedMetricName } from '../../../helpers/l10n';

server/sonar-web/src/main/js/apps/component-measures/home/reducer.js

@@ -17,10 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import groupBy from 'lodash/groupBy';
-import partition from 'lodash/partition';
-import sortBy from 'lodash/sortBy';
-import toPairs from 'lodash/toPairs';
+import { groupBy, partition, sortBy, toPairs } from 'lodash';
 import { RECEIVE_MEASURES } from './actions';
 import { getLocalizedMetricName } from '../../../helpers/l10n';
 

server/sonar-web/src/main/js/apps/component-measures/routes.js

@@ -17,33 +17,82 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import React from 'react';
-import { Route, IndexRoute, IndexRedirect } from 'react-router';
-import AppContainer from './app/AppContainer';
-import HomeContainer from './home/HomeContainer';
-import AllMeasuresContainer from './home/AllMeasuresContainer';
-import DomainMeasuresContainer from './home/DomainMeasuresContainer';
-import MeasureDetailsContainer from './details/MeasureDetailsContainer';
-import ListViewContainer from './details/drilldown/ListViewContainer';
-import TreeViewContainer from './details/drilldown/TreeViewContainer';
-import MeasureHistoryContainer from './details/history/MeasureHistoryContainer';
-import MeasureTreemapContainer from './details/treemap/MeasureTreemapContainer';
-import { checkHistoryExistence } from './hooks';
-import './styles.css';
+const routes = [
+  {
+    getComponent(_, callback) {
+      require.ensure([], require => callback(null, require('./app/AppContainer').default));
+    },
+    childRoutes: [
+      {
+        getComponent(_, callback) {
+          require.ensure([], require => callback(null, require('./home/HomeContainer').default));
+        },
+        childRoutes: [
+          {
+            getIndexRoute(_, callback) {
+              require.ensure([], require =>
+                callback(null, { component: require('./home/AllMeasuresContainer').default }));
+            }
+          },
+          {
+            path: 'domain/:domainName',
+            getComponent(_, callback) {
+              require.ensure([], require =>
+                callback(null, require('./home/DomainMeasuresContainer').default));
+            }
+          }
+        ]
+      },
+      {
+        path: 'metric/:metricKey',
+        getComponent(_, callback) {
+          require.ensure([], require =>
+            callback(null, require('./details/MeasureDetailsContainer').default));
+        },
+        childRoutes: [
+          {
+            indexRoute: {
+              onEnter(nextState, replace) {
+                const { params, location } = nextState;
+                replace({
+                  pathname: `/component_measures/metric/${params.metricKey}/list`,
+                  query: location.query
+                });
+              }
+            }
+          },
+          {
+            path: 'list',
+            getComponent(_, callback) {
+              require.ensure([], require =>
+                callback(null, require('./details/drilldown/ListViewContainer').default));
+            }
+          },
+          {
+            path: 'tree',
+            getComponent(_, callback) {
+              require.ensure([], require =>
+                callback(null, require('./details/drilldown/TreeViewContainer').default));
+            }
+          },
+          {
+            path: 'history',
+            getComponent(_, callback) {
+              require.ensure([], require =>
+                callback(null, require('./details/history/MeasureHistoryContainer').default));
+            }
+          },
+          {
+            path: 'treemap',
+            getComponent(_, callback) {
+              require.ensure([], require =>
+                callback(null, require('./details/treemap/MeasureTreemapContainer').default));
+            }
+          }
+        ]
+      }
+    ]
+  }
+];
 
-export default (
-  <Route component={AppContainer}>
-    <Route component={HomeContainer}>
-      <IndexRoute component={AllMeasuresContainer} />
-      <Route path="domain/:domainName" component={DomainMeasuresContainer} />
-    </Route>
-
-    <Route path="metric/:metricKey" component={MeasureDetailsContainer}>
-      <IndexRedirect to="list" />
-      <Route path="list" component={ListViewContainer} />
-      <Route path="tree" component={TreeViewContainer} />
-      <Route path="history" component={MeasureHistoryContainer} onEnter={checkHistoryExistence} />
-      <Route path="treemap" component={MeasureTreemapContainer} />
-    </Route>
-  </Route>
-);
+export default routes;

server/sonar-web/src/main/js/apps/component-measures/store/treeViewActions.js

@@ -17,7 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import initial from 'lodash/initial';
+import { initial } from 'lodash';
 import { getComponentTree } from '../../../api/components';
 import { enhanceWithMeasure } from '../utils';
 import { startFetching, stopFetching } from './statusActions';

server/sonar-web/src/main/js/apps/component-measures/store/treeViewReducer.js

@@ -17,7 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import pick from 'lodash/pick';
+import { pick } from 'lodash';
 import { DISPLAY_HOME } from './../app/actions';
 import { UPDATE_STORE, INIT } from './treeViewActions';
 

server/sonar-web/src/main/js/apps/component/routes.js

@@ -17,12 +17,14 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-// @flow
-import React from 'react';
-import { IndexRoute, Redirect } from 'react-router';
-import App from './components/App';
-
-export default [
-  <Redirect key="1" from="/component/index" to="/component" />,
-  <IndexRoute key="2" component={App} />
+const routes = [
+  {
+    indexRoute: {
+      getComponent(_, callback) {
+        require.ensure([], require => callback(null, require('./components/App').default));
+      }
+    }
+  }
 ];
+
+export default routes;

server/sonar-web/src/main/js/apps/custom-measures/custom-measure.js

@@ -17,8 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import defaults from 'lodash/defaults';
-import pick from 'lodash/pick';
+import { defaults, pick } from 'lodash';
 import Backbone from 'backbone';
 
 export default Backbone.Model.extend({

server/sonar-web/src/main/js/apps/custom-measures/custom-measures.js

@@ -17,7 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import uniq from 'lodash/uniq';
+import { uniq } from 'lodash';
 import Backbone from 'backbone';
 import CustomMeasure from './custom-measure';
 

server/sonar-web/src/main/js/apps/custom-measures/routes.js

@@ -17,8 +17,13 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import React from 'react';
-import { IndexRoute } from 'react-router';
-import CustomMeasuresAppContainer from './components/CustomMeasuresAppContainer';
+const routes = [
+  {
+    getIndexRoute(_, callback) {
+      require.ensure([], require =>
+        callback(null, { component: require('./components/CustomMeasuresAppContainer').default }));
+    }
+  }
+];
 
-export default <IndexRoute component={CustomMeasuresAppContainer} />;
+export default routes;

server/sonar-web/src/main/js/apps/groups/group.js

@@ -17,8 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import defaults from 'lodash/defaults';
-import pick from 'lodash/pick';
+import { defaults, pick } from 'lodash';
 import Backbone from 'backbone';
 
 export default Backbone.Model.extend({

server/sonar-web/src/main/js/apps/groups/routes.js

@@ -17,9 +17,17 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import React from 'react';
-import { IndexRoute } from 'react-router';
-import GroupsAppContainer from './components/GroupsAppContainer';
-import forSingleOrganization from '../organizations/forSingleOrganization';
+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 });
+      });
+    }
+  }
+];
 
-export default <IndexRoute component={forSingleOrganization(GroupsAppContainer)} />;
+export default routes;

server/sonar-web/src/main/js/apps/groups/search-view.js

@@ -17,7 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import debounce from 'lodash/debounce';
+import { debounce } from 'lodash';
 import Marionette from 'backbone.marionette';
 import Template from './templates/groups-search.hbs';
 

server/sonar-web/src/main/js/apps/issues/BulkChangeForm.js

@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 // @flow
-import sortBy from 'lodash/sortBy';
+import { sortBy } from 'lodash';
 import ModalForm from '../../components/common/modal-form';
 import Template from './templates/BulkChangeForm.hbs';
 import getCurrentUserFromStore from '../../app/utils/getCurrentUserFromStore';

server/sonar-web/src/main/js/apps/issues/facets/assignee-facet.js

@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import $ from 'jquery';
-import sortBy from 'lodash/sortBy';
+import { sortBy } from 'lodash';
 import CustomValuesFacet from './custom-values-facet';
 import Template from '../templates/facets/issues-assignee-facet.hbs';
 

server/sonar-web/src/main/js/apps/issues/facets/creation-date-facet.js

@@ -19,7 +19,7 @@
  */
 import $ from 'jquery';
 import moment from 'moment';
-import times from 'lodash/times';
+import { times } from 'lodash';
 import BaseFacet from './base-facet';
 import Template from '../templates/facets/issues-creation-date-facet.hbs';
 import '../../../components/widgets/barchart';

server/sonar-web/src/main/js/apps/issues/facets/resolution-facet.js

@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import $ from 'jquery';
-import sortBy from 'lodash/sortBy';
+import { sortBy } from 'lodash';
 import BaseFacet from './base-facet';
 import Template from '../templates/facets/issues-resolution-facet.hbs';
 

server/sonar-web/src/main/js/apps/issues/facets/severity-facet.js

@@ -17,7 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import sortBy from 'lodash/sortBy';
+import { sortBy } from 'lodash';
 import BaseFacet from './base-facet';
 import Template from '../templates/facets/issues-severity-facet.hbs';
 

server/sonar-web/src/main/js/apps/issues/facets/status-facet.js

@@ -17,7 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import sortBy from 'lodash/sortBy';
+import { sortBy } from 'lodash';
 import BaseFacet from './base-facet';
 import Template from '../templates/facets/issues-status-facet.hbs';
 

server/sonar-web/src/main/js/apps/issues/facets/type-facet.js

@@ -17,7 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import sortBy from 'lodash/sortBy';
+import { sortBy } from 'lodash';
 import BaseFacet from './base-facet';
 import Template from '../templates/facets/issues-type-facet.hbs';
 

server/sonar-web/src/main/js/apps/issues/routes.js

@@ -17,15 +17,15 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import React from 'react';
-import { IndexRoute, Route } from 'react-router';
-import IssuesAppContainer from './components/IssuesAppContainer';
-
-const onSearchEnter = (nextState, replace) => {
-  replace('/issues' + window.location.hash);
-};
-
-export default [
-  <IndexRoute key="index" component={IssuesAppContainer} />,
-  <Route key="search" path="search" onEnter={onSearchEnter} />
+const routes = [
+  {
+    indexRoute: {
+      getComponent(_, callback) {
+        require.ensure([], require =>
+          callback(null, require('./components/IssuesAppContainer').default));
+      }
+    }
+  }
 ];
+
+export default routes;

server/sonar-web/src/main/js/apps/metrics/metric.js

@@ -17,8 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import defaults from 'lodash/defaults';
-import pick from 'lodash/pick';
+import { defaults, pick } from 'lodash';
 import Backbone from 'backbone';
 
 export default Backbone.Model.extend({

server/sonar-web/src/main/js/apps/metrics/routes.js

@@ -17,8 +17,13 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import React from 'react';
-import { IndexRoute } from 'react-router';
-import MetricsAppContainer from './components/MetricsAppContainer';
+const routes = [
+  {
+    getIndexRoute(_, callback) {
+      require.ensure([], require =>
+        callback(null, { component: require('./components/MetricsAppContainer').default }));
+    }
+  }
+];
 
-export default <IndexRoute component={MetricsAppContainer} />;
+export default routes;

server/sonar-web/src/main/js/apps/organizations/components/OrganizationEdit.js

@@ -20,7 +20,7 @@
 // @flow
 import React from 'react';
 import { connect } from 'react-redux';
-import debounce from 'lodash/debounce';
+import { debounce } from 'lodash';
 import { translate } from '../../../helpers/l10n';
 import type { Organization } from '../../../store/organizations/duck';
 import { getOrganizationByKey } from '../../../store/rootReducer';

server/sonar-web/src/main/js/apps/organizations/routes.js

@@ -17,8 +17,6 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import React from 'react';
-import { Route, IndexRedirect } from 'react-router';
 import OrganizationPage from './components/OrganizationPage';
 import OrganizationProjects from './components/OrganizationProjects';
 import OrganizationFavoriteProjects from './components/OrganizationFavoriteProjects';
@@ -30,18 +28,40 @@ import OrganizationPermissionTemplates from './components/OrganizationPermission
 import OrganizationProjectsManagement from './components/OrganizationProjectsManagement';
 import OrganizationDelete from './components/OrganizationDelete';
 
-export default (
-  <Route path=":organizationKey" component={OrganizationPage}>
-    <IndexRedirect to="projects" />
-    <Route path="projects" component={OrganizationProjects} />
-    <Route path="projects/favorite" component={OrganizationFavoriteProjects} />
-    <Route component={OrganizationAdmin}>
-      <Route path="delete" component={OrganizationDelete} />
-      <Route path="edit" component={OrganizationEdit} />
-      <Route path="groups" component={OrganizationGroups} />
-      <Route path="permissions" component={OrganizationPermissions} />
-      <Route path="permission_templates" component={OrganizationPermissionTemplates} />
-      <Route path="projects_management" component={OrganizationProjectsManagement} />
-    </Route>
-  </Route>
-);
+const routes = [
+  {
+    path: ':organizationKey',
+    component: OrganizationPage,
+    childRoutes: [
+      {
+        indexRoute: {
+          onEnter(nextState, replace) {
+            const { params } = nextState;
+            replace(`/organizations/${params.organizationKey}/projects`);
+          }
+        }
+      },
+      {
+        path: 'projects',
+        component: OrganizationProjects
+      },
+      {
+        path: 'projects/favorite',
+        component: OrganizationFavoriteProjects
+      },
+      {
+        component: OrganizationAdmin,
+        childRoutes: [
+          { path: 'delete', component: OrganizationDelete },
+          { path: 'edit', component: OrganizationEdit },
+          { path: 'groups', component: OrganizationGroups },
+          { path: 'permissions', component: OrganizationPermissions },
+          { path: 'permission_templates', component: OrganizationPermissionTemplates },
+          { path: 'projects_management', component: OrganizationProjectsManagement }
+        ]
+      }
+    ]
+  }
+];
+
+export default routes;

server/sonar-web/src/main/js/apps/overview/components/Timeline.js

@@ -17,9 +17,9 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import d3 from 'd3';
 import React from 'react';
 import shallowCompare from 'react-addons-shallow-compare';
+import { max } from 'd3-array';
 import { LineChart } from '../../../components/charts/line-chart';
 
 const HEIGHT = 80;
@@ -56,7 +56,7 @@ export default class Timeline extends React.Component {
       return { x: index, y: snapshot.value };
     });
 
-    const domain = [0, d3.max(this.props.history, d => d.value)];
+    const domain = [0, max(this.props.history, d => d.value)];
 
     return (
       <LineChart

server/sonar-web/src/main/js/apps/overview/qualityGate/QualityGateConditions.js

@@ -19,7 +19,7 @@
  */
 import React from 'react';
 import shallowCompare from 'react-addons-shallow-compare';
-import sortBy from 'lodash/sortBy';
+import { sortBy } from 'lodash';
 import QualityGateCondition from './QualityGateCondition';
 import { ComponentType, ConditionsListType } from '../propTypes';
 import { getMeasuresAndMeta } from '../../../api/measures';

server/sonar-web/src/main/js/apps/overview/routes.js

@@ -17,11 +17,13 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import React from 'react';
-import { IndexRoute, Redirect } from 'react-router';
-import AppContainer from './components/AppContainer';
-
-export default [
-  <Redirect key="redirect" from="/dashboard/index" to="/dashboard" />,
-  <IndexRoute key="index" component={AppContainer} />
+const routes = [
+  {
+    getIndexRoute(_, callback) {
+      require.ensure([], require =>
+        callback(null, { component: require('./components/AppContainer').default }));
+    }
+  }
 ];
+
+export default routes;

server/sonar-web/src/main/js/apps/permission-templates/components/ActionsCell.js

@@ -19,7 +19,7 @@
  */
 import React from 'react';
 import { Link } from 'react-router';
-import difference from 'lodash/difference';
+import { difference } from 'lodash';
 import Backbone from 'backbone';
 import { PermissionTemplateType, CallbackType } from '../propTypes';
 import QualifierIcon from '../../../components/shared/qualifier-icon';

server/sonar-web/src/main/js/apps/permission-templates/components/Defaults.js

@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import React from 'react';
-import sortBy from 'lodash/sortBy';
+import { sortBy } from 'lodash';
 import { translate } from '../../../helpers/l10n';
 import { PermissionTemplateType } from '../propTypes';
 

server/sonar-web/src/main/js/apps/permission-templates/components/Template.js

@@ -19,7 +19,7 @@
  */
 import React from 'react';
 import Helmet from 'react-helmet';
-import debounce from 'lodash/debounce';
+import { debounce } from 'lodash';
 import TemplateHeader from './TemplateHeader';
 import TemplateDetails from './TemplateDetails';
 import HoldersList from '../../permissions/shared/components/HoldersList';

server/sonar-web/src/main/js/apps/permission-templates/routes.js

@@ -17,9 +17,17 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import React from 'react';
-import { IndexRoute } from 'react-router';
-import AppContainer from './components/AppContainer';
-import forSingleOrganization from '../organizations/forSingleOrganization';
+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 });
+      });
+    }
+  }
+];
 
-export default <IndexRoute component={forSingleOrganization(AppContainer)} />;
+export default routes;

server/sonar-web/src/main/js/apps/permission-templates/utils.js

@@ -17,7 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import sortBy from 'lodash/sortBy';
+import { sortBy } from 'lodash';
 
 export const PERMISSIONS_ORDER = ['user', 'codeviewer', 'issueadmin', 'admin', 'scan'];
 

server/sonar-web/src/main/js/apps/permissions/routes.js

@@ -17,14 +17,24 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import React from 'react';
-import { IndexRoute } from 'react-router';
-import GlobalPermissionsApp from './global/components/App';
-import ProjectPermissionsApp from './project/components/App';
-import forSingleOrganization from '../organizations/forSingleOrganization';
+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 });
+      });
+    }
+  }
+];
 
-export const globalPermissionsRoutes = (
-  <IndexRoute component={forSingleOrganization(GlobalPermissionsApp)} />
-);
-
-export const projectPermissionsRoutes = <IndexRoute component={ProjectPermissionsApp} />;
+export const projectPermissionsRoutes = [
+  {
+    getIndexRoute(_, callback) {
+      require.ensure([], require =>
+        callback(null, { component: require('./project/components/App').default }));
+    }
+  }
+];

server/sonar-web/src/main/js/apps/permissions/shared/store/groups/byName.js

@@ -17,7 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import keyBy from 'lodash/keyBy';
+import { keyBy } from 'lodash';
 import {
   RECEIVE_HOLDERS_SUCCESS,
   GRANT_PERMISSION_TO_GROUP,

server/sonar-web/src/main/js/apps/permissions/shared/store/users/byLogin.js

@@ -17,7 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import keyBy from 'lodash/keyBy';
+import { keyBy } from 'lodash';
 import {
   RECEIVE_HOLDERS_SUCCESS,
   GRANT_PERMISSION_TO_USER,

server/sonar-web/src/main/js/apps/project-admin/key/BulkUpdateResults.js

@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import React from 'react';
-import some from 'lodash/some';
+import { some } from 'lodash';
 import { translateWithParameters, translate } from '../../../helpers/l10n';
 
 export default class BulkUpdateResults extends React.Component {

server/sonar-web/src/main/js/apps/project-admin/links/utils.js

@@ -17,8 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import partition from 'lodash/partition';
-import sortBy from 'lodash/sortBy';
+import { partition, sortBy } from 'lodash';
 
 const PROVIDED_TYPES = ['homepage', 'ci', 'issue', 'scm', 'scm_dev'];
 

server/sonar-web/src/main/js/apps/project-admin/quality-gate/Form.js

@@ -20,7 +20,7 @@
 import React from 'react';
 import Select from 'react-select';
 import shallowCompare from 'react-addons-shallow-compare';
-import some from 'lodash/some';
+import { some } from 'lodash';
 import { translate } from '../../../helpers/l10n';
 
 export default class Form extends React.Component {

server/sonar-web/src/main/js/apps/project-admin/quality-profiles/Table.js

@@ -19,8 +19,7 @@
  */
 import React from 'react';
 import shallowCompare from 'react-addons-shallow-compare';
-import groupBy from 'lodash/groupBy';
-import orderBy from 'lodash/orderBy';
+import { groupBy, orderBy } from 'lodash';
 import ProfileRow from './ProfileRow';
 import { translate } from '../../../helpers/l10n';
 

server/sonar-web/src/main/js/apps/project-admin/store/components.js

@@ -17,8 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import keyBy from 'lodash/keyBy';
-import omit from 'lodash/omit';
+import { keyBy, omit } from 'lodash';
 import { RECEIVE_PROJECT_MODULES, CHANGE_KEY } from './actions';
 
 const components = (state = {}, action = {}) => {

server/sonar-web/src/main/js/apps/project-admin/store/gates.js

@@ -17,8 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import keyBy from 'lodash/keyBy';
-import values from 'lodash/values';
+import { keyBy, values } from 'lodash';
 import { RECEIVE_GATES } from './actions';
 
 const gates = (state = {}, action = {}) => {

server/sonar-web/src/main/js/apps/project-admin/store/links.js

@@ -17,8 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import keyBy from 'lodash/keyBy';
-import omit from 'lodash/omit';
+import { keyBy, omit } from 'lodash';
 import { RECEIVE_PROJECT_LINKS, DELETE_PROJECT_LINK, ADD_PROJECT_LINK } from './actions';
 
 const links = (state = {}, action = {}) => {

server/sonar-web/src/main/js/apps/project-admin/store/linksByProject.js

@@ -17,7 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import without from 'lodash/without';
+import { without } from 'lodash';
 import { RECEIVE_PROJECT_LINKS, DELETE_PROJECT_LINK, ADD_PROJECT_LINK } from './actions';
 
 const linksByProject = (state = {}, action = {}) => {

server/sonar-web/src/main/js/apps/project-admin/store/profiles.js

@@ -17,8 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import keyBy from 'lodash/keyBy';
-import values from 'lodash/values';
+import { keyBy, values } from 'lodash';
 import { RECEIVE_PROFILES } from './actions';
 
 const profiles = (state = {}, action = {}) => {

server/sonar-web/src/main/js/apps/project-admin/store/profilesByProject.js

@@ -17,7 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import without from 'lodash/without';
+import { without } from 'lodash';
 import { RECEIVE_PROJECT_PROFILES, SET_PROJECT_PROFILE } from './actions';
 
 const profilesByProject = (state = {}, action = {}) => {

server/sonar-web/src/main/js/apps/projectActivity/components/Events.js

@@ -19,7 +19,7 @@
  */
 // @flow
 import React from 'react';
-import sortBy from 'lodash/sortBy';
+import { sortBy } from 'lodash';
 import Event from './Event';
 import type { Event as EventType } from '../../../store/projectActivity/duck';
 

server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysesList.js

@@ -20,21 +20,19 @@
 // @flow
 import React from 'react';
 import { connect } from 'react-redux';
-import groupBy from 'lodash/groupBy';
+import { groupBy } from 'lodash';
 import moment from 'moment';
 import ProjectActivityAnalysis from './ProjectActivityAnalysis';
 import FormattedDate from '../../../components/ui/FormattedDate';
 import { getProjectActivity } from '../../../store/rootReducer';
 import { getAnalyses } from '../../../store/projectActivity/duck';
 import { translate } from '../../../helpers/l10n';
+import type { Analysis } from '../../../store/projectActivity/duck';
 
 class ProjectActivityAnalysesList extends React.Component {
   props: {
     project: string,
-    analyses?: Array<{
-      key: string,
-      date: string
-    }>,
+    analyses?: Array<Analysis>,
     canAdmin: boolean
   };
 
@@ -59,22 +57,22 @@ class ProjectActivityAnalysesList extends React.Component {
             <li
               key={day}
               className="project-activity-day"
-              data-day={moment(Number(day)).format('YYYY-MM-DD')}
-            >
+              data-day={moment(Number(day)).format('YYYY-MM-DD')}>
               <div className="project-activity-date">
                 <FormattedDate date={Number(day)} format="LL" />
               </div>
 
               <ul className="project-activity-analyses-list">
-                {byDay[day].map(analysis => (
-                  <ProjectActivityAnalysis
-                    key={analysis.key}
-                    analysis={analysis}
-                    isFirst={analysis === firstAnalysis}
-                    project={this.props.project}
-                    canAdmin={this.props.canAdmin}
-                  />
-                ))}
+                {byDay[day] != null &&
+                  byDay[day].map(analysis => (
+                    <ProjectActivityAnalysis
+                      key={analysis.key}
+                      analysis={analysis}
+                      isFirst={analysis === firstAnalysis}
+                      project={this.props.project}
+                      canAdmin={this.props.canAdmin}
+                    />
+                  ))}
               </ul>
             </li>
           ))}

server/sonar-web/src/main/js/apps/projectActivity/routes.js

@@ -17,9 +17,13 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-// @flow
-import React from 'react';
-import { IndexRoute } from 'react-router';
-import ProjectActivityApp from './components/ProjectActivityApp';
+const routes = [
+  {
+    getIndexRoute(_, callback) {
+      require.ensure([], require =>
+        callback(null, { component: require('./components/ProjectActivityApp').default }));
+    }
+  }
+];
 
-export default <IndexRoute component={ProjectActivityApp} />;
+export default routes;

server/sonar-web/src/main/js/apps/projects-admin/main.js

@@ -18,9 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import React from 'react';
-import debounce from 'lodash/debounce';
-import uniq from 'lodash/uniq';
-import without from 'lodash/without';
+import { debounce, uniq, without } from 'lodash';
 import Header from './header';
 import Search from './search';
 import Projects from './projects';

server/sonar-web/src/main/js/apps/projects-admin/routes.js

@@ -17,9 +17,17 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import React from 'react';
-import { IndexRoute } from 'react-router';
-import AppContainer from './AppContainer';
-import forSingleOrganization from '../organizations/forSingleOrganization';
+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 });
+      });
+    }
+  }
+];
 
-export default <IndexRoute component={forSingleOrganization(AppContainer)} />;
+export default routes;

server/sonar-web/src/main/js/apps/projects-admin/search.js

@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import React from 'react';
-import sortBy from 'lodash/sortBy';
+import { sortBy } from 'lodash';
 import { TYPE, QUALIFIERS_ORDER } from './constants';
 import DeleteView from './delete-view';
 import RadioToggle from '../../components/controls/RadioToggle';

server/sonar-web/src/main/js/apps/projects/components/AllProjects.js

@@ -25,6 +25,7 @@ import PageSidebar from './PageSidebar';
 import VisualizationsContainer from '../visualizations/VisualizationsContainer';
 import { parseUrlQuery } from '../store/utils';
 import { getProjectUrl } from '../../../helpers/urls';
+import '../styles.css';
 
 export default class AllProjects extends React.Component {
   static propTypes = {

server/sonar-web/src/main/js/apps/projects/components/App.js

@@ -20,7 +20,6 @@
 import React from 'react';
 import Helmet from 'react-helmet';
 import { translate } from '../../../helpers/l10n';
-import '../styles.css';
 
 export default class App extends React.Component {
   componentDidMount() {

server/sonar-web/src/main/js/apps/projects/components/ProjectCardLanguages.js

@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import React from 'react';
-import sortBy from 'lodash/sortBy';
+import { sortBy } from 'lodash';
 import { connect } from 'react-redux';
 import Tooltip from '../../../components/controls/Tooltip';
 import { getLanguages } from '../../../store/rootReducer';

server/sonar-web/src/main/js/apps/projects/components/ProjectTagsSelectorContainer.js

@@ -20,8 +20,7 @@
 //@flow
 import React from 'react';
 import { connect } from 'react-redux';
-import debounce from 'lodash/debounce';
-import without from 'lodash/without';
+import { debounce, without } from 'lodash';
 import TagsSelector from '../../../components/tags/TagsSelector';
 import { searchProjectTags } from '../../../api/components';
 import { setProjectTags } from '../store/actions';

server/sonar-web/src/main/js/apps/projects/filters/LanguagesFilter.js

@@ -19,8 +19,7 @@
  */
 //@flow
 import React from 'react';
-import difference from 'lodash/difference';
-import sortBy from 'lodash/sortBy';
+import { difference, sortBy } from 'lodash';
 import Filter from './Filter';
 import FilterHeader from './FilterHeader';
 import SearchableFilterFooter from './SearchableFilterFooter';

server/sonar-web/src/main/js/apps/projects/filters/SearchFilterContainer.js

@@ -20,7 +20,7 @@
 //@flow
 import React from 'react';
 import { withRouter } from 'react-router';
-import debounce from 'lodash/debounce';
+import { debounce } from 'lodash';
 import { getFilterUrl } from './utils';
 import SearchFilter from './SearchFilter';
 

server/sonar-web/src/main/js/apps/projects/filters/TagsFilter.js

@@ -19,9 +19,7 @@
  */
 //@flow
 import React from 'react';
-import debounce from 'lodash/debounce';
-import difference from 'lodash/difference';
-import sortBy from 'lodash/sortBy';
+import { debounce, difference, sortBy } from 'lodash';
 import Filter from './Filter';
 import FilterHeader from './FilterHeader';
 import SearchableFilterFooter from './SearchableFilterFooter';

server/sonar-web/src/main/js/apps/projects/filters/utils.js

@@ -17,9 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import each from 'lodash/each';
-import omitBy from 'lodash/omitBy';
-import isNil from 'lodash/isNil';
+import { each, isNil, omitBy } from 'lodash';
 
 export const getFilterUrl = (ownProps, part) => {
   const basePathName = ownProps.organization