reduced initial download size

webapp/app.jsx

@@ -1,52 +1,57 @@
-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
+// Start
 
-var BoardsWrapper = require('boardsapiwrapper.js')
-var boards = new BoardsWrapper()
-var Icon = require('icon.jsx')
+document.getElementById('root').innerHTML = `
+  <div style="text-align:center">
+    <h1>Loading</h1>
+    <p>Gathering components</p>
+  </div>
+`
 
-// Load pages
+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)
 
-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
 
-// Define Main Components
-
-var Container = React.createClass({
+  var Container = React.createClass({
     render () {
       return (<div className="container app">{this.props.children}</div>)
     }
-})
+  })
 
-var App = React.createClass({
+  var App = React.createClass({
     render () {
       return (<div><Navbar /><Container>{this.props.children}</Container></div>)
     }
-})
+  })
 
-// Static pages
+  // Static pages
 
-var Static = React.createClass({
+  var Static = React.createClass({
     html () {
       return { __html: this.props.content }
     },
@@ -57,27 +62,38 @@ var Static = React.createClass({
         return <NotFound />
       }
     }
-})
+  })
 
-var Homepage = React.createClass({
+  var Homepage = React.createClass({
     render () {
       return <Static className="homepage" content={require('landing.md')} />
     }
-})
+  })
 
-var NotFound = React.createClass({
+  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>
+  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">
@@ -107,5 +123,21 @@ ReactDOM.render(
             <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: [