feat: using code splitting on routers

* enable syntax-dynamic-import

.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": {

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(/ToReplaceByTitle/g, _.get(config, 'web.title') ? config.web.title : defaultTitle);
-      .replace(/(main.*\.js|style.*\.css)/g, `${base}/-/static/$1`);
 
     res.setHeader('Content-Type', 'text/html');
 

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="/(search/:keyword)?" component={ HomePage } />
-            <Route exact path="/detail/@:scope/:package" component={Detail} />
+            <Route exact path="/detail/@:scope/:package" component={DetailPackage} />
-            <Route exact path="/detail/:package" component={Detail} />
+            <Route exact path="/detail/:package" component={DetailPackage} />
           </Switch>
         </div>
         <Footer/>

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;
+    }
+  };
+}

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 */