dashboard: webpack optimization, description update

.gitignore

@@ -32,4 +32,4 @@ profile.tmp
 profile.cov
 
 # dashboard
-/go-ethereum/dashboard/bundler/node_modules/
+/dashboard/bundler/node_modules/

dashboard/README.md

@@ -1,25 +1,31 @@
 ## Go Ethereum Dashboard
 ### Description
 
-The GED is a data visualizer integrated into geth, intended to collect and visualize useful information of an Ethereum node. 
+The dashboard is a data visualizer integrated into geth, intended to collect and visualize useful information of an Ethereum node. 
-The GED consists of two parts:
+The dashboard consists of two parts:
 * The server listens to connections, collects data with a given refresh rate, and updates the dashboards through the opened connections.
 * The client waits for update messages, updates the content and tries to reconnect on connection loss.
 
-The client's UI is maintained by [Inferno][Inferno], a sympathetic React-like JavaScript library.
+### Users
-In order to create the Inferno's virtual DOM using JSX syntax, there is need to use the provided babel plugin.
+#### Installation steps
-[Webpack][Webpack] is used for bundling the resources in order to gain cost efficiency and maintainability.
-[Node.js][Node.js] is used for installing the necessary dependencies.
-
-### Installation steps
-
-_Server_
 
 1. `cd .../go-ethereum/`
-1. `go generate ./dashboard && go install -v ./cmd/geth`
+1. `go install -v ./cmd/geth`
-1. run the server with `geth --rinkeby --dashboard --vmodule=dashboard=5 --metrics console`
+1. Run the server with `geth --rinkeby --dashboard --vmodule=dashboard=5 --metrics`.
-1. optionally use `--dashboard.assets=<path>` to set the assets' path => useful for debugging
+1. Enter `localhost:8080` (or change the configuration).
-1. enter `localhost:8080` (or change the configuration)
+
+### Developers
+
+The client's UI is maintained by [Inferno][Inferno], a sympathetic React-like JavaScript library.
+In order to create the Inferno's virtual DOM using JSX syntax, babel plugin is required.
+
+[Webpack module bundler][Webpack] is used for bundling the resources in order to gain cost efficiency and maintainability.
+The resources will be bundled into a single JS file (`bundle.js`), which can be then referenced from the main html file. 
+Finally this JS file will also take part in the `assets.go`.
+
+[Node.js][Node.js] is used for installing the necessary dependencies for the module bundler.
+
+#### Installation steps
 
 _Module bundler_
 
@@ -27,6 +33,26 @@ _Module bundler_
 1. `npm install`
 1. `./node_modules/.bin/webpack` // check out `webpack.config.js`
 
+_Server_
+
+1. Bundle the resources.
+1. `cd .../go-ethereum/`.
+1. `go generate ./dashboard && go install -v ./cmd/geth`.
+1. Run the server with `geth --rinkeby --dashboard --vmodule=dashboard=5 --metrics console`.
+    * Optionally use `--dashboard.assets=<path>` to set the assets' path (e.g. `--dashboard.assets=".../go-ethereum/dashboard/assets"`). 
+Using this flag it is enough to only bundle the resources with webpack and refresh the page.
+There is no need for stopping the server and regenerating the `assets.go` on every change of the UI.
+1. Enter `localhost:8080` (or change the configuration).
+
+#### Tools
+[Webpack][Webpack] offers great tools for visualizing the bundle's dependency tree and space usage.
+
+* Generate the bundle's profile by running `webpack --profile --json > stats.json`
+* For the _dependency tree_ go to [Webpack Analyze][WA], and import `stats.json`
+* For the _space usage_ go to [Webpack Visualizer][WV], and import `stats.json`
+
 [Inferno]: https://infernojs.org/
 [Webpack]: https://webpack.github.io/
+[WA]: http://webpack.github.io/analyse/
+[WV]: http://chrisbateman.github.io/webpack-visualizer/
 [Node.js]: https://nodejs.org/en/

dashboard/bundler/src/components/PageContent.js

@@ -42,9 +42,7 @@ class ChartComponent extends Component {
                 </div>
                 <div className="x_content">
                     {/* The chart will be generated here after the component is mounted (this.componentDidMount). */}
-                    <canvas ref={data => {
+                    <canvas ref={data => this.data = data}/>
-                        this.data = data
-                    }}/>
                 </div>
             </div>
         </div>;

dashboard/bundler/webpack.config.js

@@ -1,4 +1,42 @@
 const path = require('path');
+const webpack = require('webpack');
+
+const plugins = [
+    new webpack.optimize.CommonsChunkPlugin({
+        name:      'main', // Move dependencies to our main file.
+        children:  true, // Look for common dependencies in all children,
+        minChunks: 2, // How many times a dependency must come up before being extracted
+    }),
+
+    // This plugins optimizes chunks and modules by
+    // how much they are used in your app.
+    new webpack.optimize.OccurrenceOrderPlugin(),
+
+    // This plugin prevents Webpack from creating chunks
+    // that would be too small to be worth loading separately.
+    new webpack.optimize.MinChunkSizePlugin({
+        minChunkSize: 51200, // ~50kb
+    }),
+
+    // This plugin minifies all the Javascript code of the final bundle.
+    new webpack.optimize.UglifyJsPlugin({
+        mangle:   true,
+        compress: {
+            warnings: false, // Suppress uglification warnings
+        },
+    }),
+
+    // This plugin defines various variables that we can set to false
+    // to avoid code related to them from being compiled in the final bundle.
+    new webpack.DefinePlugin({
+        __SERVER__:      false,
+        __DEVELOPMENT__: false,
+        __DEVTOOLS__:    false,
+        'process.env':   {
+            BABEL_ENV: JSON.stringify(process.env.NODE_ENV),
+        },
+    }),
+];
 
 module.exports = {
     entry:  './src/index.js',
@@ -6,6 +44,7 @@ module.exports = {
         path:     path.resolve(__dirname, '../assets/js'),
         filename: 'bundle.js',
     },
+    plugins: plugins,
     externals: { // External libraries, which will not be included in the bundled file(s).
         inferno: 'Inferno',
         component: 'Inferno.Component',