Merge pull request #51 from SaltieRL/pa-fullscreen

Fix styling and reduce bundle times
SaltieRL · Jul 14, 2019 · b4e21b7 · b4e21b7
2 parents 1c82dfa + f1dcc07
commit b4e21b7
Show file tree

Hide file tree

Showing 17 changed files with 626 additions and 499 deletions.
diff --git a/docs/package-lock.json b/docs/package-lock.json
diff --git a/docs/package.json b/docs/package.json
@@ -4,7 +4,7 @@
  "description": "Examples for the web replay viewer",
  "main": "src/index.tsx",
  "scripts": {
- "start": "npx webpack-dev-server --mode development"
+ "start": "npx webpack-dev-server --inline --progress --mode development --port 4000"
  },
  "keywords": [
  "Examples",
@@ -16,15 +16,14 @@
  "license": "MIT",
  "dependencies": {
  "@material-ui/core": "^3.9.3",
- "@material-ui/icons": "^3.0.1",
  "@material-ui/lab": "^3.0.0-alpha.30",
- "@material-ui/styles": "^3.0.0-alpha.10",
  "react": "^16.8.6",
  "react-dom": "^16.8.6",
  "three": "^0.104.0"
  },
  "devDependencies": {
  "@types/react-dom": "^16.8.4",
+ "autodll-webpack-plugin": "^0.4.2",
  "awesome-typescript-loader": "^5.2.1",
  "file-loader": "^3.0.1",
  "html-webpack-plugin": "^3.2.0",

diff --git a/docs/src/App.tsx b/docs/src/App.tsx
@@ -29,7 +29,7 @@ class App extends Component<any, State> {
  return (
  <div style={{ maxWidth: 900, width: "100%", margin: "0 auto" }}>
  <div>
- <h2>Welcome to React</h2>
+ <h2>Welcome to Replay Viewer</h2>
  </div>
  <Tabs value={tab} onChange={this.handleChange}>
  <Tab label="Viewer" value="viewer" />

diff --git a/docs/src/components/Viewer.tsx b/docs/src/components/Viewer.tsx
@@ -1,4 +1,5 @@
-import { Grid, WithStyles, withStyles } from "@material-ui/core"
+import Grid from "@material-ui/core/Grid"
+import withStyles, { WithStyles } from "@material-ui/core/styles/withStyles"
 import React, { Component } from "react"
 
 import {

diff --git a/docs/src/index.html b/docs/src/index.html
@@ -9,10 +9,6 @@
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900|Raleway"
  />
- <link
- rel="stylesheet"
- href="https://fonts.googleapis.com/icon?family=Material+Icons"
- />
  <title>Replay Viewer | calculated.gg</title>
  </head>
  <body>

diff --git a/docs/webpack.config.js b/docs/webpack.config.js
@@ -1,20 +1,26 @@
 const path = require("path"),
  webpack = require("webpack"),
- HtmlWebpackPlugin = require("html-webpack-plugin")
+ HtmlWebpackPlugin = require("html-webpack-plugin"),
+ AutoDllPlugin = require("autodll-webpack-plugin")
 
 module.exports = {
  entry: {
  app: [path.resolve(__dirname, "src/index.tsx")],
  vendor: ["react", "react-dom"],
  },
  output: {
+ filename: "[name].bundle.js",
  path: path.resolve(__dirname, "dist"),
- filename: "js/[name].bundle.js",
+ publicPath: "/",
  },
- devtool: "source-map",
  resolve: {
  extensions: [".js", ".jsx", ".json", ".ts", ".tsx"],
  },
+ optimization: {
+ removeAvailableModules: false,
+ removeEmptyChunks: false,
+ splitChunks: false,
+ },
  module: {
  rules: [
  {
@@ -37,5 +43,12 @@ module.exports = {
  template: path.resolve(__dirname, "src/index.html"),
  }),
  new webpack.HotModuleReplacementPlugin(),
+ new AutoDllPlugin({
+ inject: true, // will inject the DLL bundle to index.html
+ filename: "[name].dll.js",
+ entry: {
+ vendor: ["react", "react-dom"],
+ },
+ }),
  ],
 }