initial code splitting

package.json

@@ -5,7 +5,7 @@
   "private": true,
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "webpack --config webpack.prod.js",
+    "build": "webpack --config webpack.prod.js --env production",
     "devbuild": "webpack --config webpack.dev.js"
   },
   "repository": {

src/js/Index/Index.js

@@ -1,5 +1,4 @@
 import React, { Component } from "react";
-const axios = require('axios');
 
 class Index extends Component{
 
@@ -11,13 +10,6 @@ class Index extends Component{
     render(){
         return (
             <table className="app-table">
-                <thead>
-                    <tr>
-                        <th>
-                            <h1 className="center-text text-no-select">Music Tools</h1>
-                        </th>
-                    </tr>
-                </thead>
                 <tbody>
                     <tr>
                         <td className="center-text text-no-select ui-text" style={{fontSize: "20px"}}>

src/js/Maths/Maths.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { BrowserRouter as Router, Route, Link, Switch, Redirect} from "react-router-dom";
+import { BrowserRouter as Route, Link} from "react-router-dom";
 
 import Count from "./Count.js";
 

src/js/MusicTools.js

@@ -1,13 +1,6 @@
 import React, { Component } from "react";
 import { BrowserRouter as Router, Route, Link, Switch, Redirect} from "react-router-dom";
 
-import Index from "./Index/Index.js";
-import Maths from "./Maths/Maths.js";
-import Playlists from "./Playlist/Playlists.js";
-import PlaylistView from "./Playlist/View/View.js";
-import Settings from "./Settings/Settings.js";
-import Admin from "./Admin/Admin.js";
-
 import NotFound from "./Error/NotFound.js";
 
 import showMessage from "./Toast.js"
@@ -33,6 +26,13 @@ import { Build, PieChart, QueueMusic, ExitToApp, AccountCircle, KeyboardBackspac
 
 const axios = require('axios');
 
+const LazyIndex = React.lazy(() => import("./Index/Index"))
+const LazyMaths = React.lazy(() => import("./Maths/Maths"))
+const LazyPlaylists = React.lazy(() => import("./Playlist/Playlists"))
+const LazyPlaylistView = React.lazy(() => import("./Playlist/View/View"))
+const LazySettings = React.lazy(() => import("./Settings/Settings"))
+const LazyAdmin = React.lazy(() => import("./Admin/Admin"))
+
 class MusicTools extends Component {
 
     constructor(props){
@@ -88,7 +88,7 @@ class MusicTools extends Component {
                         <MenuIcon />
                         </IconButton>
                         <Typography variant="h6">
-                            Music Tools
+                            <Link to='/app/playlists' style={{textDecoration: 'none'}}>Music Tools</Link>
                         </Typography>
                     </Toolbar>
                     </AppBar>
@@ -137,25 +137,28 @@ class MusicTools extends Component {
                         </List>
                     </Drawer>
                 </ThemeProvider>
-                    <div className="pad-12">
+                    <div className="full-width">
                         <Switch>
-                            <Route path="/app" exact component={Index} />
+                            <React.Suspense fallback={<LoadingMessage/>}>
-                            <Route path="/app/playlists" component={Playlists} />
+                                <Route path="/app" exact component={LazyIndex} />
-                            <Route path="/app/maths" component={Maths} />
+                                <Route path="/app/playlists" component={LazyPlaylists} />
-                            <Route path="/app/settings" component={Settings} />
+                                <Route path="/app/maths" component={LazyMaths} />
-                            { this.state.type == 'admin' && <Route path="/app/admin" component={Admin} /> }
+                                <Route path="/app/settings" component={LazySettings} />
-                            <Route path='/app/playlist/:name' component={PlaylistView} />
+                                { this.state.type == 'admin' && <Route path="/app/admin" component={LazyAdmin} /> }
+                                <Route path='/app/playlist/:name' component={LazyPlaylistView} />
+                            </React.Suspense>
                             <Route component={NotFound} />
                         </Switch>
                     </div>
                 </div>
-                <footer>
-                    <a href="https://github.com/Sarsoo/spotify-web">view source code</a>
-                </footer>
             </Router>
         );
     }
 
 }
 
+function LoadingMessage(props) {
+    return <ThemeProvider theme={GlobalTheme}><Typography variant="h5" component="h2" className="ui-text center-text">Loading...</Typography></ThemeProvider>;
+}
+
 export default MusicTools;

src/js/Playlist/NewPlaylist.js

@@ -1,5 +1,4 @@
 import React, { Component } from "react";
-import { BrowserRouter as Redirect } from "react-router-dom";
 const axios = require('axios');
 
 import showMessage from "../Toast.js"

src/js/Playlist/Playlists.js

@@ -1,6 +1,5 @@
 import React, { Component } from "react";
 import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
-const axios = require('axios');
 
 import PlaylistsView from "./PlaylistsView.js"
 import NewPlaylist from "./NewPlaylist.js";

src/js/Playlist/PlaylistsView.js

@@ -95,18 +95,18 @@ class PlaylistsView extends Component {
 
     render() {
         
-        const table =   <Table playlists={this.state.playlists} 
+        const grid =   <PlaylistGrid playlists={this.state.playlists} 
                             handleRunPlaylist={this.handleRunPlaylist} 
                             handleDeletePlaylist={this.handleDeletePlaylist}
                             handleRunAll={this.handleRunAll}/>;
 
-        const loadingMessage = <p className="center-text">loading...</p>;
+        const loadingMessage = <ThemeProvider theme={GlobalTheme}><Typography variant="h5" component="h2" className="ui-text center-text">Loading...</Typography></ThemeProvider>;
 
-        return this.state.isLoading ? loadingMessage : table;
+        return this.state.isLoading ? loadingMessage : grid;
     }
 }
 
-function Table(props){
+function PlaylistGrid(props){
     return (
         <ThemeProvider theme={GlobalTheme}>
         <Grid container 
@@ -120,7 +120,7 @@ function Table(props){
                     <Typography variant="h5" component="h2">No Playlists</Typography>
                 </Grid>
             ) : (
-                props.playlists.map((playlist) => <Row playlist={ playlist } 
+                props.playlists.map((playlist) => <PlaylistCard playlist={ playlist } 
                                                         handleRunPlaylist={props.handleRunPlaylist} 
                                                         handleDeletePlaylist={props.handleDeletePlaylist}
                                                         key={ playlist.name }/>) 
@@ -131,7 +131,7 @@ function Table(props){
     );
 }
 
-function Row(props){
+function PlaylistCard(props){
     return (
         <Grid item xs>
             <Card>
@@ -140,12 +140,11 @@ function Row(props){
                     { props.playlist.name }
                     </Typography>
                 </CardContent>
-                    {/* <Button variant="contained" color="primary" component={Link} to={getPlaylistLink(props.playlist.name)}>{ props.playlist.name }</Button> */}
                 <CardActions>
                     <ButtonGroup color="primary">
-                        <Button variant="contained" color="primary" component={Link} to={getPlaylistLink(props.playlist.name)}>View</Button>
+                    <Button variant="contained" component={Link} to={getPlaylistLink(props.playlist.name)}>View</Button>
-                        <Button variant="contained" color="primary" onClick={(e) => props.handleRunPlaylist(props.playlist.name, e)}>Run</Button>
+                    <Button variant="contained" onClick={(e) => props.handleRunPlaylist(props.playlist.name, e)}>Run</Button>
-                        <Button variant="contained" color="primary" onClick={(e) => props.handleDeletePlaylist(props.playlist.name, e)}>Delete</Button>
+                    <Button variant="contained" onClick={(e) => props.handleDeletePlaylist(props.playlist.name, e)}>Delete</Button>
                     </ButtonGroup>
                 </CardActions>
             </Card>

src/js/Playlist/View/Count.js

@@ -2,7 +2,8 @@ import React, { Component } from "react";
 const axios = require('axios');
 
 import showMessage from "../../Toast.js"
-import PieChart from "../../Maths/PieChart.js";
+
+const LazyPieChart = React.lazy(() => import("../../Maths/PieChart"))
 
 class Count extends Component {
 
@@ -63,7 +64,9 @@ class Count extends Component {
     }
 
     render() {
+        const loadingMessage = <ThemeProvider theme={GlobalTheme}><Typography variant="h5" component="h2" className="ui-text center-text">Loading...</Typography></ThemeProvider>;
         return (
+            <React.Suspense fallback={<loadingMessage/>}>
             <tbody>
                 <tr>
                     <td className="ui-text center-text text-no-select">Scrobble Count: <b>{this.state.playlist.lastfm_stat_count.toLocaleString()} / {this.state.playlist.lastfm_stat_percent}%</b></td>
@@ -79,7 +82,7 @@ class Count extends Component {
                 </tr>
                 <tr>
                     <td>
-                        <PieChart data={[{
+                        <LazyPieChart data={[{
                                 "label": `${this.state.playlist.name} Tracks`,
                                 "value": this.state.playlist.lastfm_stat_percent
                             },{
@@ -91,7 +94,7 @@ class Count extends Component {
                 </tr>
                 <tr>
                     <td>
-                        <PieChart data={[{
+                        <LazyPieChart data={[{
                                 "label": `${this.state.playlist.name} Albums`,
                                 "value": this.state.playlist.lastfm_stat_album_percent
                             },{
@@ -103,7 +106,7 @@ class Count extends Component {
                 </tr>
                 <tr>
                     <td>
-                        <PieChart data={[{
+                        <LazyPieChart data={[{
                                 "label": `${this.state.playlist.name} Artists`,
                                 "value": this.state.playlist.lastfm_stat_artist_percent
                             },{
@@ -119,6 +122,7 @@ class Count extends Component {
                     </td>
                 </tr>
             </tbody>
+            </React.Suspense>
         );
     }
 }

src/js/Playlist/View/View.js

@@ -1,9 +1,12 @@
 import React, { Component } from "react";
-import { BrowserRouter as Router, Route, Link, Switch, Redirect} from "react-router-dom";
+import { ThemeProvider, Typography } from "@material-ui/core";
-const axios = require('axios');
+import { BrowserRouter as Route, Link} from "react-router-dom";
+
+import GlobalTheme from "../../Theme";
+
+const LazyEdit = React.lazy(() => import("./Edit"))
+const LazyCount = React.lazy(() => import("./Count"))
 
-import Edit from "./Edit.js";
-import Count from "./Count.js";
 
 class View extends Component{
 
@@ -25,12 +28,18 @@ class View extends Component{
                         </th>
                     </tr>
                 </thead>
-                <Route path={`${this.props.match.url}/edit`} render={(props) => <Edit {...props} name={this.props.match.params.name}/>} />
+                <React.Suspense fallback={<LoadingMessage/>}>
-                <Route path={`${this.props.match.url}/count`} render={(props) => <Count {...props} name={this.props.match.params.name}/>} />
+                    <Route path={`${this.props.match.url}/edit`} render={(props) => <LazyEdit {...props} name={this.props.match.params.name}/>} />
+                    <Route path={`${this.props.match.url}/count`} render={(props) => <LazyCount {...props} name={this.props.match.params.name}/>} />
+                </React.Suspense>
             </table>
         );
     }
 
 }
 
+function LoadingMessage(props) {
+    return <ThemeProvider theme={GlobalTheme}><Typography variant="h5" component="h2" className="ui-text center-text">Loading...</Typography></ThemeProvider>;
+}
+
 export default View;

webpack.common.js

@@ -28,6 +28,8 @@ module.exports = {
     resolve: { extensions: ["*", ".js", ".jsx"] },
 	output: {
     filename: '[name].bundle.js',
-		path: path.resolve(__dirname, 'build/js')
+    chunkFilename: '[name].bundle.js',
+    path: path.resolve(__dirname, 'build/js'),
+    publicPath: '/build/js/'
 	}
 };