add code splitting

package.json

@@ -19,9 +19,10 @@
   },
   "devDependencies": {
     "@babel/core": "^7.1.6",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-transform-react-jsx": "^7.1.6",
-    "@types/highcharts": "^5.0.36",
     "@types/classnames": "^2.2.7",
+    "@types/highcharts": "^5.0.36",
     "@types/lodash": "^4.14.121",
     "@types/node": "^10.12.19",
     "babel-loader": "^8.0.4",

src/chart/index.tsx

@@ -3,7 +3,7 @@ import Highcharts from "highcharts/highstock";
 import merge from "lodash/merge";
 import API from "../api";
 import { createApiSeries, createSeries } from "./helpers";
-import zipObject = require("lodash/zipObject");
+import zipObject from "lodash/zipObject";
 import { DEFAULT_HIGHCHARTS, DEFAULT_YAXIS } from "./defaults";
 import CustomLinks from "../components/customLinks";
 import * as css from "./style.css";

src/index.tsx

@@ -9,7 +9,6 @@ import { defaultsWithoutArrays } from "./utils";
 import Spectrum, { Props as SpectrumProps } from "./spectrum";
 import MultiTable, { Props as MultiTableProps } from "./multiTable";
 import Score, { Props as ScoreProps } from "./score";
-import Chart, { Props as ChartProps } from "./chart";
 
 export default class Flipside {
   api: API;
@@ -34,7 +33,10 @@ export default class Flipside {
     render(<Score {...opts} api={this.api} />, document.getElementById(el));
   }
 
-  chart(el: string, opts: ChartProps) {
+  async chart(el: string, opts: any) {
+    const {
+      default: Chart
+    } = await import(/* webpackChunkName: "chart" */ "./chart");
     render(<Chart {...opts} api={this.api} />, document.getElementById(el));
   }
 

src/multiTable/index.tsx

@@ -6,9 +6,8 @@ import CustomLinks from "../components/customLinks";
 import API from "../api";
 import "./style.scss";
 
-import uniq = require("lodash/uniq");
-import sortBy = require("lodash/sortBy");
-import reverse = require("lodash/reverse");
+import sortBy from "lodash/sortBy";
+import reverse from "lodash/reverse";
 
 // Define the columns, the content of their header, and how their data is rendered.
 type ColumnDefinition = {

src/table/index.tsx

@@ -1,5 +1,5 @@
 import { h, Component } from "preact";
-import keyBy = require("lodash/keyBy");
+import keyBy from "lodash/keyBy";
 import CustomLinks from "./components/customLinks";
 import "./styles.scss";
 import API from "../api";

tsconfig.json

@@ -1,9 +1,10 @@
 {
   "compilerOptions": {
     "outDir": "./dist/",
+    "moduleResolution": "node",
     "noImplicitAny": true,
     "sourceMap": true,
-    "module": "commonjs",
+    "module": "esnext",
     "target": "es5",
     "lib": ["es2015", "dom"],
     "jsx": "react",

webpack.config.js

@@ -7,6 +7,7 @@ module.exports = {
   entry: "./src/index.tsx",
   output: {
     filename: filename,
+    chunkFilename: `flipside-[name]-v${version}.js`,
     path: path.resolve(__dirname, "dist")
   },
   mode: "development",

yarn.lock

@@ -88,6 +88,12 @@
   version "7.1.6"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.1.6.tgz#16e97aca1ec1062324a01c5a6a7d0df8dd189854"
 
+"@babel/plugin-syntax-dynamic-import@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.2.0.tgz#69c159ffaf4998122161ad8ebc5e6d1f55df8612"
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
 "@babel/plugin-syntax-jsx@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.0.0.tgz#034d5e2b4e14ccaea2e4c137af7e4afb39375ffd"