Merge pull request #735 from verdaccio/fix-bundle-size

build: reduce bundle size and enable code splitting

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

.gitignore

@@ -28,8 +28,5 @@ bundle.js.map
 __tests__
 
 # Compiled script
-static/index.html
+static/*
-static/style.*
-static/*.js
-static/logo.*
 

package.json

@@ -59,6 +59,7 @@
     "babel-jest": "22.4.3",
     "babel-loader": "7.1.4",
     "babel-plugin-flow-runtime": "0.17.0",
+    "babel-plugin-syntax-dynamic-import": "6.18.0",
     "babel-plugin-transform-async-to-generator": "6.24.1",
     "babel-plugin-transform-class-properties": "6.24.1",
     "babel-plugin-transform-decorators-legacy": "1.3.4",
@@ -113,7 +114,7 @@
     "puppeteer": "1.1.1",
     "react": "16.2.0",
     "react-dom": "16.2.0",
-    "react-hot-loader": "4.0.0",
+    "react-hot-loader": "4.2.0",
     "react-router-dom": "4.2.2",
     "react-syntax-highlighter": "5.8.0",
     "rimraf": "2.6.2",
@@ -129,8 +130,9 @@
     "url-loader": "0.6.2",
     "verdaccio-auth-memory": "0.0.4",
     "verdaccio-memory": "1.0.1",
-    "webpack": "4.8.3",
+    "webpack": "4.10.2",
-    "webpack-cli": "2.0.15",
+    "webpack-bundle-analyzer": "2.13.1",
+    "webpack-cli": "3.0.1",
     "webpack-dev-server": "3.1.4",
     "webpack-merge": "4.1.2",
     "whatwg-fetch": "2.0.3"

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/components/PackageSidebar/modules/Dependencies/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import _ from 'lodash';
+import get from 'lodash/get';
 import Module from '../../Module';
 
 import classes from './style.scss';
@@ -13,7 +13,7 @@ export default class Dependencies extends React.Component {
   };
 
   get dependencies() {
-    return _.get(this, 'props.packageMeta.latest.dependencies', {});
+    return get(this, 'props.packageMeta.latest.dependencies', {});
   }
 
   render() {

src/webui/src/components/PackageSidebar/modules/Maintainers/index.jsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import _ from 'lodash';
+import get from 'lodash/get';
+import filter from 'lodash/filter';
+import size from 'lodash/size';
+import uniqBy from 'lodash/uniqBy';
 import Module from '../../Module';
 
 import classes from './style.scss';
@@ -19,27 +22,27 @@ export default class Maintainers extends React.Component {
   }
 
   get author() {
-    return _.get(this, 'props.packageMeta.latest.author');
+    return get(this, 'props.packageMeta.latest.author');
   }
 
   get contributors() {
-    let contributors = _.get(this, 'props.packageMeta.latest.contributors', {});
+    let contributors = get(this, 'props.packageMeta.latest.contributors', {});
-    return _.filter(contributors, (contributor) => {
+    return filter(contributors, (contributor) => {
       return (
-        contributor.name !== _.get(this, 'author.name') &&
+        contributor.name !== get(this, 'author.name') &&
-        contributor.email !== _.get(this, 'author.email')
+        contributor.email !== get(this, 'author.email')
       );
     });
   }
 
   get showAllContributors() {
-    return this.state.showAllContributors || _.size(this.contributors) <= 5;
+    return this.state.showAllContributors || size(this.contributors) <= 5;
   }
 
   get uniqueContributors() {
     if (!this.contributors) return [];
 
-    return _.uniqBy(this.contributors, (contributor) => contributor.name).slice(0, 5);
+    return uniqBy(this.contributors, (contributor) => contributor.name).slice(0, 5);
   }
 
   handleShowAllContributors() {

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