reduced initial download size

webapp/app.jsx

@@ -1,111 +1,143 @@
-var React = require('react')
-var ReactDOM = require('react-dom')
-var Router = require('react-router').Router
-var Route = require('react-router').Route
-var IndexRoute = require('react-router').IndexRoute
-
 // Load CSS
+
 require('normalize.css')
 require('skeleton.css')
-require('style.css')
 require('raleway.css')
 
-// Load Components
-
-var BoardsWrapper = require('boardsapiwrapper.js')
-var boards = new BoardsWrapper()
-var Icon = require('icon.jsx')
-
-// Load pages
-
-var Navbar = require('navbar.jsx')(boards)
-var Users = require('users.jsx')(boards)
-var Settings = require('settings.jsx')(boards)
-var Profile = require('profile.jsx')(boards)
-var Board = require('board.jsx')(boards)
-var PostPage = require('postpage.jsx')(boards)
-var CommentPage = require('commentpage.jsx')(boards)
-var ProfileEditor = require('profile-editor.jsx')(boards)
-var BoardEditor = require('board-editor.jsx')(boards)
-var PostEditor = require('post-editor.jsx')(boards)
-var Status = require('status.jsx')(boards)
-
-// Define Main Components
-
-var Container = React.createClass({
-  render () {
-    return (<div className="container app">{this.props.children}</div>)
-  }
-})
-
-var App = React.createClass({
-  render () {
-    return (<div><Navbar /><Container>{this.props.children}</Container></div>)
-  }
-})
-
-// Static pages
-
-var Static = React.createClass({
-  html () {
-    return { __html: this.props.content }
-  },
-  render () {
-    if (this.props.content) {
-      return <div className={this.props.className} dangerouslySetInnerHTML={this.html()} />
-    } else {
-      return <NotFound />
-    }
-  }
-})
-
-var Homepage = React.createClass({
-  render () {
-    return <Static className="homepage" content={require('landing.md')} />
-  }
-})
-
-var NotFound = React.createClass({
-  render () {
-    return (<div className="text-center">
-      <h1><Icon name="ban" className="light"/></h1>
-      <h3>Sorry, there's nothing here!</h3>
-    </div>)
-  }
-})
-
 // Start
 
-ReactDOM.render(
-  <Router>
-    <Route path="/" component={App}>
-      <IndexRoute component={Homepage} />
-      <Route path="/@:userid">
-        <IndexRoute component={Profile} />
-        <Route path="post/:posthash" >
-          <IndexRoute component={PostPage} />
-        </Route>
-        <Route path=":boardname">
-          <IndexRoute component={Board} />
-          <Route path=":posthash">
-            <IndexRoute component={PostPage} />
-            <Route path=":commenthash" component={CommentPage} />
+document.getElementById('root').innerHTML = `
+  <div style="text-align:center">
+    <h1>Loading</h1>
+    <p>Gathering components</p>
+  </div>
+`
+
+require.ensure('react', _ => {
+  var React = require('react')
+  // Load CSS
+  require('style.css')
+  require('font-awesome.min.css')
+  // Load Components
+  var BoardsWrapper = require('boardsapiwrapper.js')
+  var boards = new BoardsWrapper()
+  var Icon = require('icon.jsx')
+  // Load pages
+  var Navbar = require('navbar.jsx')(boards)
+  var Users = require('users.jsx')(boards)
+  var Settings = require('settings.jsx')(boards)
+  var Profile = require('profile.jsx')(boards)
+  var Board = require('board.jsx')(boards)
+  var PostPage = require('postpage.jsx')(boards)
+  var CommentPage = require('commentpage.jsx')(boards)
+  var ProfileEditor = require('profile-editor.jsx')(boards)
+  var BoardEditor = require('board-editor.jsx')(boards)
+  var PostEditor = require('post-editor.jsx')(boards)
+  var Status = require('status.jsx')(boards)
+
+  // Define Main Components
+
+  var Container = React.createClass({
+    render () {
+      return (<div className="container app">{this.props.children}</div>)
+    }
+  })
+
+  var App = React.createClass({
+    render () {
+      return (<div><Navbar /><Container>{this.props.children}</Container></div>)
+    }
+  })
+
+  // Static pages
+
+  var Static = React.createClass({
+    html () {
+      return { __html: this.props.content }
+    },
+    render () {
+      if (this.props.content) {
+        return <div className={this.props.className} dangerouslySetInnerHTML={this.html()} />
+      } else {
+        return <NotFound />
+      }
+    }
+  })
+
+  var Homepage = React.createClass({
+    render () {
+      return <Static className="homepage" content={require('landing.md')} />
+    }
+  })
+
+  var NotFound = React.createClass({
+    render () {
+      return (<div className="text-center">
+        <h1><Icon name="ban" className="light"/></h1>
+        <h3>Sorry, there's nothing here!</h3>
+      </div>)
+    }
+  })
+
+  var RootComponent = React.createClass({
+    getInitialState () {
+      return {}
+    },
+    componentDidMount () {
+      require.ensure(['react-router'], _ => {
+        this.setState(require('react-router'))
+      })
+    },
+    render () {
+      if (this.state.Router) {
+        var Router = this.state.Router
+        var IndexRoute = this.state.IndexRoute
+        var Route = this.state.Route
+        return <Router>
+          <Route path="/" component={App}>
+            <IndexRoute component={Homepage} />
+            <Route path="/@:userid">
+              <IndexRoute component={Profile} />
+              <Route path="post/:posthash" >
+                <IndexRoute component={PostPage} />
+              </Route>
+              <Route path=":boardname">
+                <IndexRoute component={Board} />
+                <Route path=":posthash">
+                  <IndexRoute component={PostPage} />
+                  <Route path=":commenthash" component={CommentPage} />
+                </Route>
+              </Route>
+            </Route>
+            <Route path="edit">
+              <Route path="profile" component={ProfileEditor} />
+              <Route path="board(/:boardname)">
+                <IndexRoute component={BoardEditor} />
+                <Route path="post(/:posthash)" component={PostEditor} />
+              </Route>
+            </Route>
+            <Route path="post/:posthash" component={PostPage} />
+            <Route path="board/:boardname" component={Board} />
+            <Route path="users" component={Users} />
+            <Route path="settings" component={Settings} />
+            <Route path="status" component={Status} />
+            <Route path="*" component={NotFound} />
           </Route>
-        </Route>
-      </Route>
-      <Route path="edit">
-        <Route path="profile" component={ProfileEditor} />
-        <Route path="board(/:boardname)">
-          <IndexRoute component={BoardEditor} />
-          <Route path="post(/:posthash)" component={PostEditor} />
-        </Route>
-      </Route>
-      <Route path="post/:posthash" component={PostPage} />
-      <Route path="board/:boardname" component={Board} />
-      <Route path="users" component={Users} />
-      <Route path="settings" component={Settings} />
-      <Route path="status" component={Status} />
-      <Route path="*" component={NotFound} />
-    </Route>
-  </Router>, document.getElementById('root')
-)
+        </Router>
+      } else {
+        return <div className="loading" >
+          <div className="text-center">
+            <Icon className="center-block fa-spin fa-3x light" name="refresh" />
+            <h4 className="top-half-em">Downloading Components</h4>
+          </div>
+        </div>
+      }
+    }
+  })
+  require.ensure('react-dom', _ => {
+    var ReactDOM = require('react-dom')
+    ReactDOM.render(
+      <RootComponent />, document.getElementById('root')
+    )
+  })
+})

webapp/components/icon.jsx

@@ -1,5 +1,4 @@
 var React = require('react')
-require('font-awesome.min.css')
 
 module.exports = React.createClass({
   class: function () {

webapp/index.html

@@ -2,22 +2,28 @@
 <html>
   <head>
     <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <title>{%= o.htmlWebpackPlugin.options.title %}</title>
   </head>
   <body>
-    <div id="root"></div>
     <noscript>
-      <div class="container">
+      <div>
         <h1>Oops</h1>
         <p>This website is a full fledged web application that has no backend. It
           is entirely a static website, just a bunch of files. All the logic that
           makes it useful is on the client side. This makes Javascript a true
           necessity to view this website.</p>
-        <h4 class="light">All is not lost!</h4>
+        <h4>All is not lost!</h4>
         <p>We are planning to support no-javascript clients in the future.</p>
         <a href="https://github.com/fazo96/ipfs-boards">Check out the project page to learn more.</a>
+        <hr /><p>Please ignore the following part.</p><hr />
       </div>
     </noscript>
+    <div id="root">
+      <div style="text-align:center">
+        <h1>Loading</h1>
+        <p>Downloading Scripts</p>
+      </div>
+    </div>
   </body>
 </html>

webpack.config.js

@@ -31,7 +31,7 @@ var config = {
       {
         test: /\.jsx?$/,
         loader: 'eslint-loader',
-        exclude: /node_modules/
+        exclude: /node_modules|webapp\/dist\//
       }
     ],
     loaders: [