Merge pull request #81 from mjmiguel/bundle-opt

Bundle optimization

Author: mjmiguel

.babelrc

@@ -12,6 +12,7 @@
   "plugins": [
     ["@babel/transform-runtime"],
     ["@babel/proposal-class-properties"],
-    ["@babel/proposal-object-rest-spread"]
+    ["@babel/proposal-object-rest-spread"],
+    ["@babel/plugin-syntax-dynamic-import"]
   ]
 }

package.json

@@ -278,11 +278,13 @@
     "@babel/core": "^7.10.3",
     "@babel/plugin-proposal-class-properties": "^7.10.4",
     "@babel/plugin-proposal-object-rest-spread": "^7.10.4",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-transform-runtime": "^7.10.3",
     "@babel/preset-env": "^7.10.3",
     "@babel/preset-react": "^7.10.1",
     "@babel/preset-typescript": "^7.10.4",
     "@jest-runner/electron": "^3.0.0",
+    "@loadable/component": "^5.13.1",
     "@testing-library/jest-dom": "^5.11.0",
     "@testing-library/react": "^10.4.3",
     "@types/cookie": "^0.4.0",
@@ -341,6 +343,7 @@
     "typescript": "^3.9.6",
     "url-loader": "^4.1.0",
     "webpack": "^4.43.0",
+    "webpack-bundle-analyzer": "^3.8.0",
     "webpack-cli": "^3.3.12",
     "webpack-dev-server": "^3.11.0",
     "webpack-node-externals": "^1.7.2"

src/client/components/composer/NewRequest/ComposerNewRequest.jsx

@@ -1,15 +1,20 @@
 import React from "react";
 import uuid from "uuid/v4"; // (Universally Unique Identifier)--generates a unique ID
 import gql from "graphql-tag";
+import loadable from "@loadable/component";
+
 import HeaderEntryForm from "./HeaderEntryForm.jsx";
 import BodyEntryForm from "./BodyEntryForm.jsx";
-import GraphQLBodyEntryForm from "./GraphQLBodyEntryForm.jsx";
 import GRPCProtoEntryForm from "./GRPCProtoEntryForm.jsx";
 import FieldEntryForm from "./FieldEntryForm.jsx";
 import CookieEntryForm from "./CookieEntryForm.jsx";
 import historyController from "../../../controllers/historyController";
 import GraphQLIntrospectionLog from "./GraphQLIntrospectionLog";
-import GraphQLVariableEntryForm from "./GraphQLVariableEntryForm";
+
+// lazy loading to reduce bundle size (codemirror)
+const GraphQLBodyEntryForm = loadable(() => import('./GraphQLBodyEntryForm'));
+const GraphQLVariableEntryForm = loadable(() => import('./GraphQLVariableEntryForm')); 
+
 
 const ComposerNewRequest = ({
   setNewRequestFields,

src/client/components/containers/ContentsContainer.tsx

@@ -1,6 +1,9 @@
 import * as React from "react";
+import loadable from "@loadable/component";
+
+// lazy loading to reduce bundle size (chart.js)
+const BarGraph = loadable(() => import('../display/BarGraph'))
 
-import BarGraph from "../display/BarGraph";
 import ReqResContainer from "./ReqResContainer.jsx";
 import NavBarContainer from "./NavBarContainer.jsx";
 

src/client/db.js

@@ -1,5 +1,5 @@
-import Dexie from "dexie";
-
+import Dexie from 'dexie'
+ 
 const db = new Dexie("Swell");
 
 db.on("versionchange", function (event) {

webpack.config.js

@@ -2,7 +2,8 @@ const path = require("path");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const CspHtmlWebpackPlugin = require("csp-html-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const nodeExternals = require("webpack-node-externals");
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+
 
 module.exports = {
   target: "web",
@@ -79,5 +80,11 @@ module.exports = {
       },
     }),
     new CspHtmlWebpackPlugin(),
+    // options here: https://github.com/webpack-contrib/webpack-bundle-analyzer
+    // set to true to display bundle breakdown
+    new BundleAnalyzerPlugin({
+      openAnalyzer: true,
+      analyzerMode: 'static'
+    }),
   ],
 };