From 0af6f5a865d37604fbdace4daf3574d4da24ab71 Mon Sep 17 00:00:00 2001
From: "Juan Picado @jotadeveloper" <juanpicado19@gmail.com>
Date: Sun, 3 Jun 2018 18:34:41 +0200
Subject: [PATCH] feat: using code splitting on routers

* enable syntax-dynamic-import
---
 .babelrc                              |  3 ++-
 src/api/web/index.js                  |  3 +--
 src/webui/src/router.js               | 12 +++++++-----
 src/webui/src/utils/asyncComponent.js | 24 ++++++++++++++++++++++++
 tools/webpack.config.js               | 17 +++++++++++++++++
 5 files changed, 51 insertions(+), 8 deletions(-)
 create mode 100644 src/webui/src/utils/asyncComponent.js

diff --git a/.babelrc b/.babelrc
index 7222de515..08706fcd8 100644
--- a/.babelrc
+++ b/.babelrc
@@ -22,7 +22,8 @@
         "react-hot-loader/babel",
         "transform-runtime",
         "transform-object-rest-spread",
-        "transform-decorators-legacy"
+        "transform-decorators-legacy",
+        "syntax-dynamic-import"
       ]
     },
     "test": {
diff --git a/src/api/web/index.js b/src/api/web/index.js
index a7edc496d..316168aee 100644
--- a/src/api/web/index.js
+++ b/src/api/web/index.js
@@ -43,8 +43,7 @@ module.exports = function(config, auth, storage) {
     const defaultTitle = 'Verdaccio';
     let webPage = template
       .replace(/ToReplaceByVerdaccio/g, base)
-      .replace(/ToReplaceByTitle/g, _.get(config, 'web.title') ? config.web.title : defaultTitle)
-      .replace(/(main.*\.js|style.*\.css)/g, `${base}/-/static/$1`);
+      .replace(/ToReplaceByTitle/g, _.get(config, 'web.title') ? config.web.title : defaultTitle);
 
     res.setHeader('Content-Type', 'text/html');
 
diff --git a/src/webui/src/router.js b/src/webui/src/router.js
index c732eb154..7dbd78662 100644
--- a/src/webui/src/router.js
+++ b/src/webui/src/router.js
@@ -1,11 +1,13 @@
 import React from 'react';
 import {HashRouter as Router, Route, Switch} from 'react-router-dom';
+import {asyncComponent} from './utils/asyncComponent';
 
 import Header from './components/Header';
-import Home from './modules/home';
-import Detail from './modules/detail';
 import Footer from './components/Footer';
 
+const DetailPackage = asyncComponent(() => import('./modules/detail'));
+const HomePage = asyncComponent(() => import('./modules/home'));
+
 const RouterApp = () => {
   return (
     <Router>
@@ -13,9 +15,9 @@ const RouterApp = () => {
         <Header/>
         <div className="container">
           <Switch>
-            <Route exact path="/(search/:keyword)?" component={ Home } />
-            <Route exact path="/detail/@:scope/:package" component={Detail} />
-            <Route exact path="/detail/:package" component={Detail} />
+            <Route exact path="/(search/:keyword)?" component={ HomePage } />
+            <Route exact path="/detail/@:scope/:package" component={DetailPackage} />
+            <Route exact path="/detail/:package" component={DetailPackage} />
           </Switch>
         </div>
         <Footer/>
diff --git a/src/webui/src/utils/asyncComponent.js b/src/webui/src/utils/asyncComponent.js
new file mode 100644
index 000000000..ed11243a5
--- /dev/null
+++ b/src/webui/src/utils/asyncComponent.js
@@ -0,0 +1,24 @@
+import React from 'react';
+
+export function asyncComponent(getComponent) {
+  return class AsyncComponent extends React.Component {
+    static Component = null;
+    state = {Component: AsyncComponent.Component};
+
+    componentWillMount() {
+      if (!this.state.Component) {
+        getComponent().then(({default: Component}) => {
+          AsyncComponent.Component = Component;
+          this.setState({Component});
+        });
+      }
+    }
+    render() {
+      const {Component} = this.state;
+      if (Component) {
+        return <Component {...this.props} />;
+      }
+      return null;
+    }
+  };
+}
diff --git a/tools/webpack.config.js b/tools/webpack.config.js
index 2471fccd1..c959235b6 100644
--- a/tools/webpack.config.js
+++ b/tools/webpack.config.js
@@ -7,6 +7,7 @@ module.exports = {
   output: {
     path: `${env.APP_ROOT}/static/`,
     filename: '[name].[hash].js',
+    publicPath: '/-/static',
   },
 
   resolve: {
@@ -22,6 +23,22 @@ module.exports = {
     }),
   ],
 
+  optimization: {
+    runtimeChunk: {
+      name: 'manifest',
+    },
+    splitChunks: {
+      cacheGroups: {
+        vendor: {
+          test: /[\\/]node_modules[\\/]/,
+          name: 'vendors',
+          priority: -20,
+          chunks: 'all',
+        },
+      },
+    },
+  },
+
   module: {
     rules: [
       /* Pre loader */