[WIP] - search route lazily executed

.babelrc

@@ -7,11 +7,7 @@
           "node": "current"
         }
       }
-    ],
-    "react"
-  ],
-  "plugins": [
-    "transform-react-jsx-source"
+    ]
   ],
   "env": {
     "coverage": {
@@ -27,6 +23,9 @@
         "react"
       ],
       "plugins": [
+        "dynamic-import-node",
+        "syntax-dynamic-import",
+        "transform-react-jsx-source",
         [
           "istanbul",
           {

README.md

@@ -57,6 +57,10 @@ Optimized for use with:
 
 [Node Inspector Manager](https://chrome.google.com/webstore/detail/nodejs-inspector-manager/bnmjajghllhhhgiaeipaibfmnjnponhd?hl=en)
 
+[React Performance Devtool](https://chrome.google.com/webstore/detail/react-performance-devtool/fcombecpigkkfcbfaeikoeegkmkjfbfm)
+
+[React-Sight](https://chrome.google.com/webstore/detail/react-sight/aalppolilappfakpmdfdkpppdnhpgifn)
+
 ### Server Side Unit Tests:
 
     npm run server-unit-test

gulpfile.babel.js/configs/.eslintrc

@@ -1,11 +1,13 @@
 {
+  "parser": "babel-eslint",
   "extends": [
     "airbnb",
     "prettier",
     "prettier/react"
   ],
   "plugins": ["prettier"],
   "rules": {
+    "import/first": ["off"],
     "comma-dangle": [2, "never"],
     "react/jsx-filename-extension": [0, { "extensions": [".js"] }],
     "prefer-arrow-callback": ["error", { "allowNamedFunctions": true }],

gulpfile.babel.js/configs/config.js

@@ -31,6 +31,7 @@ const config = {
     server: {
       integration: {
         src: [
+          'test/server/utils/babel-register.js',
           'test/server/utils/test_initializer_util.js',
           'test/server/integration/**/*.js',
           'test/shared/integration/**/*.js',
@@ -39,6 +40,7 @@ const config = {
       },
       unit: {
         src: [
+          'test/server/utils/babel-register.js',
           'test/server/utils/test_initializer_utils.js',
           'test/server/utils/enzyme_initializer.js',
           'test/shared/utils/**/*.js',

gulpfile.babel.js/configs/karma.conf.coverage.js

@@ -87,7 +87,11 @@ module.exports = function karmaConfIntegration(config) {
                       }
                     ]
                   ],
-                  plugins: ['istanbul']
+                  plugins: [
+                    'istanbul',
+                    'syntax-dynamic-import',
+                    'transform-react-jsx-source'
+                  ]
                 }
               }
             ],

gulpfile.babel.js/configs/karma.conf.integration.js

@@ -65,7 +65,7 @@ module.exports = function karmaConfIntegration(config) {
                     ]
                   ],
                   plugins: [
-                    'react-hot-loader/babel',
+                    'syntax-dynamic-import',
                     'transform-react-jsx-source'
                   ]
                 }

gulpfile.babel.js/configs/karma.conf.unit.js

@@ -74,7 +74,7 @@ module.exports = function karmaConfUnit(config) {
                     ]
                   ],
                   plugins: [
-                    'react-hot-loader/babel',
+                    'syntax-dynamic-import',
                     'transform-react-jsx-source'
                   ]
                 }

gulpfile.babel.js/configs/webpack.config.js

@@ -10,6 +10,7 @@ module.exports = {
       'fontfaceobserver',
       'react',
       'react-dom',
+      'react-loadable',
       'bluebird',
       'history/createBrowserHistory',
       'react-router-config',
@@ -29,7 +30,7 @@ module.exports = {
       'exenv',
       'scriptjs'
     ],
-    app: [
+    bundle: [
       'react-hot-loader/patch',
       // activate HMR for React
 
@@ -46,7 +47,7 @@ module.exports = {
   },
   output: {
     path: path.join(__dirname, '../../dist'),
-    filename: 'bundle.js',
+    filename: '[name].js',
     publicPath: 'http://localhost:3001/static'
   },
   devServer: {
@@ -64,14 +65,14 @@ module.exports = {
     new ManifestPlugin({ writeToFileEmit: true }),
     new webpack.optimize.CommonsChunkPlugin({
       name: 'vendor',
-      chunks: ['app'],
+      chunks: ['app', 'search'],
       minChunks(module /* , count */) {
         const { context } = module;
         return context && context.indexOf('node_modules') >= 0;
       },
       filename: 'vendor.js'
     }),
-    new webpack.optimize.ModuleConcatenationPlugin(),
+    // new webpack.optimize.ModuleConcatenationPlugin(),
     new webpack.HotModuleReplacementPlugin(),
     // enable HMR globally
 
@@ -100,7 +101,11 @@ module.exports = {
                   }
                 ]
               ],
-              plugins: ['react-hot-loader/babel', 'transform-react-jsx-source']
+              plugins: [
+                'syntax-dynamic-import',
+                'react-hot-loader/babel',
+                'transform-react-jsx-source'
+              ]
             }
           }
         ],

gulpfile.babel.js/configs/webpack.config.production.js

@@ -11,6 +11,7 @@ module.exports = {
       'fontfaceobserver',
       'react',
       'react-dom',
+      'react-loadable',
       'bluebird',
       'history/createBrowserHistory',
       'react-router-config',
@@ -34,7 +35,8 @@ module.exports = {
   },
   output: {
     path: path.join(__dirname, '../../dist/static/js'),
-    filename: 'bundle.[hash].js'
+    publicPath: '/js/',
+    filename: '[name].[hash].js'
   },
   plugins: [
     new webpack.HashedModuleIdsPlugin({
@@ -51,8 +53,7 @@ module.exports = {
     }),
     new webpack.optimize.CommonsChunkPlugin({
       name: 'vendor',
-      chunks: ['app'],
-      async: false,
+      chunks: ['app', 'search'],
       minChunks(module /* , count */) {
         const { context } = module;
         return context && context.indexOf('node_modules') >= 0;
@@ -94,7 +95,8 @@ module.exports = {
                     }
                   }
                 ]
-              ]
+              ],
+              plugins: ['syntax-dynamic-import']
             }
           }
         ],

gulpfile.babel.js/tasks/gulp_babel_server.js

@@ -5,6 +5,12 @@ import babel from 'gulp-babel';
 import config from './../configs/config';
 
 gulp.task('babel-server', function babelServer() {
+  const env = process.env.NODE_ENV;
+  const plugins =
+    env === 'production'
+      ? ['dynamic-import-node']
+      : ['dynamic-import-node', 'transform-react-jsx-source'];
+
   const babelStream = babel({
     sourceMaps: 'inline',
     presets: [
@@ -17,7 +23,8 @@ gulp.task('babel-server', function babelServer() {
           }
         }
       ]
-    ]
+    ],
+    plugins
   });
 
   babelStream.on('error', function handleError(err) {

gulpfile.babel.js/tasks/gulp_server_integration_test.js

@@ -8,7 +8,7 @@ gulp.task('server-integration-test', function serverIntegrationTest() {
     .src(config.test.server.integration.src, {
       read: false
     })
-    .pipe(mocha({ require: 'babel-register' }))
+    .pipe(mocha())
     .once('error', function handleError(err) {
       log(err);
     });

gulpfile.babel.js/tasks/gulp_server_unit_test.js

@@ -8,7 +8,7 @@ gulp.task('server-unit-test', function serverUnitTeset() {
     .src(config.test.server.unit.src, {
       read: false
     })
-    .pipe(mocha({ require: 'babel-register' }))
+    .pipe(mocha())
     .once('error', function handleError(err) {
       log(err);
     });

package.json

@@ -23,7 +23,7 @@
     "style-lint-fix": "stylelint ./src/**/*.scss --syntax scss --config gulpfile.babel.js/configs/.stylelintrc --fix",
     "fix-all": "npm run js-lint-fix && npm run style-lint-fix",
     "svg-min": "gulp svg-min",
-    "test": "gulp test",
+    "test": "NODE_ENV=test gulp test",
     "ci-test": "gulp ci-test",
     "prod-server": "pm2 reload pm2/pm2.json5",
     "build-prod": "NODE_ENV=production gulp build-prod",
@@ -68,6 +68,7 @@
     "react-dom": "16.2.0",
     "react-error-boundary": "1.2.0",
     "react-helmet": "5.2.0",
+    "react-loadable": "5.3.1",
     "react-redux": "5.0.6",
     "react-router": "4.2.0",
     "react-router-config": "1.0.0-beta.4",
@@ -93,10 +94,13 @@
     "babel-core": "6.26.0",
     "babel-eslint": "8.0.2",
     "babel-loader": "7.1.2",
+    "babel-plugin-dynamic-import-node": "1.2.0",
     "babel-plugin-istanbul": "4.1.5",
+    "babel-plugin-syntax-dynamic-import": "6.18.0",
     "babel-plugin-transform-react-jsx-source": "6.22.0",
     "babel-preset-env": "1.6.1",
     "babel-preset-react": "6.24.1",
+    "babel-register": "6.26.0",
     "babel-runtime": "6.26.0",
     "bunyan-prettystream": "0.1.3",
     "chai": "4.1.2",

src/views/containers/layouts/layout.js

@@ -15,16 +15,30 @@ import log from '../../../services/logger_service';
 const renderRoutes = (routes, location) =>
   routes ? (
     <Switch key={location.key} location={location}>
-      {routes.map(route => (
-        <Route
-          key={location.key}
-          location={location}
-          path={route.path}
-          exact={route.exact}
-          strict={route.strict}
-          component={route.component}
-        />
-      ))}
+      {routes.map(route => {
+        if (route.component) {
+          return (
+            <Route
+              key={location.key}
+              location={location}
+              path={route.path}
+              exact={route.exact}
+              strict={route.strict}
+              component={route.component}
+            />
+          );
+        }
+        return (
+          <Route
+            key={location.key}
+            location={location}
+            path={route.path}
+            exact={route.exact}
+            strict={route.strict}
+            render={route.render}
+          />
+        );
+      })}
     </Switch>
   ) : null;