Merge pull request #16374 from Bouncey/chore/bundleSize

chore(bundle): Reduce react-bootstrap footprint by half

.babelrc

@@ -2,6 +2,15 @@
     "presets": ["es2015", "react", "stage-0"],
     "plugins": [
       "babel-plugin-add-module-exports",
-      "lodash"
+      "lodash",
+      [
+        "transform-imports", {
+          "react-bootstrap": {
+              "transform": "react-bootstrap/lib/${member}",
+              "preventFullImport": true
+          }
+      }
+    ]
+
     ]
 }

.gitignore

@@ -53,6 +53,6 @@ public/js/vendor*
 public/js/faux*
 public/js/frame-runner*
 public/css/main*
-
+webpack-bundle-stats.html
 server/rev-manifest.json
 google-credentials.json

package-lock.json

@@ -506,6 +506,12 @@
       "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.0.2.tgz",
       "integrity": "sha1-E8pRXYYgbaC6xm6DTdOX2HWBCUw="
     },
+    "ast-types": {
+      "version": "0.9.6",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.9.6.tgz",
+      "integrity": "sha1-ECyenpAF0+fjgpvwxPok7oYu6bk=",
+      "dev": true
+    },
     "async": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/async/-/async-2.1.5.tgz",
@@ -1530,6 +1536,18 @@
         "babel-runtime": "6.26.0"
       }
     },
+    "babel-plugin-transform-imports": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-imports/-/babel-plugin-transform-imports-1.4.1.tgz",
+      "integrity": "sha512-o7EqCZFj0pKUUDwYDZLTRSg1wNMN69p31l3Sf1+ujTFjWUq+/plAUJ04kO1kn5oLVaHbwLi2F4jQbIHFTN2t+A==",
+      "dev": true,
+      "requires": {
+        "babel-types": "6.26.0",
+        "lodash.camelcase": "4.3.0",
+        "lodash.kebabcase": "4.1.1",
+        "lodash.snakecase": "4.1.1"
+      }
+    },
     "babel-plugin-transform-object-rest-spread": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz",
@@ -1823,6 +1841,12 @@
       "integrity": "sha1-eAqZyE59YAJgNhURxId2E78k9rs=",
       "dev": true
     },
+    "base62": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/base62/-/base62-1.2.1.tgz",
+      "integrity": "sha512-xVtfFHNPUzpCNHygpXFGMlDk3saxXLQcOOQzAAk6ibvlAHgT6WKXLv9rMFhcyEK1n9LuDmp/LxyGW/Fm9L8++g==",
+      "dev": true
+    },
     "base64-arraybuffer": {
       "version": "0.1.5",
       "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz",
@@ -3067,6 +3091,38 @@
       "resolved": "https://registry.npmjs.org/commondir/-/commondir-0.0.1.tgz",
       "integrity": "sha1-ifAP3NUbUZxXhzP+xWPmptp/W+I="
     },
+    "commoner": {
+      "version": "0.10.8",
+      "resolved": "https://registry.npmjs.org/commoner/-/commoner-0.10.8.tgz",
+      "integrity": "sha1-NPw2cs0kOT6LtH5wyqApOBH08sU=",
+      "dev": true,
+      "requires": {
+        "commander": "2.6.0",
+        "detective": "4.7.1",
+        "glob": "5.0.15",
+        "graceful-fs": "4.1.11",
+        "iconv-lite": "0.4.19",
+        "mkdirp": "0.5.1",
+        "private": "0.1.8",
+        "q": "1.5.1",
+        "recast": "0.11.23"
+      },
+      "dependencies": {
+        "glob": {
+          "version": "5.0.15",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-5.0.15.tgz",
+          "integrity": "sha1-G8k2ueAvSmA/zCIuz3Yz0wuLk7E=",
+          "dev": true,
+          "requires": {
+            "inflight": "1.0.6",
+            "inherits": "2.0.3",
+            "minimatch": "3.0.4",
+            "once": "1.4.0",
+            "path-is-absolute": "1.0.1"
+          }
+        }
+      }
+    },
     "component-bind": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/component-bind/-/component-bind-1.0.0.tgz",
@@ -3949,6 +4005,24 @@
       "integrity": "sha1-9B8cEL5LAOh7XxPaaAdZ8sW/0+I=",
       "dev": true
     },
+    "detective": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/detective/-/detective-4.7.1.tgz",
+      "integrity": "sha512-H6PmeeUcZloWtdt4DAkFyzFL94arpHr3NOwwmVILFiy+9Qd4JTxxXrzfyGk/lmct2qVGBwTSwSXagqu2BxmWig==",
+      "dev": true,
+      "requires": {
+        "acorn": "5.3.0",
+        "defined": "1.0.0"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.3.0.tgz",
+          "integrity": "sha512-Yej+zOJ1Dm/IMZzzj78OntP/r3zHEaKcyNoU2lAaxPtrseM6rF0xwqoz5Q5ysAiED9hTjI2hgtvLXitlCN1/Ug==",
+          "dev": true
+        }
+      }
+    },
     "dev-ip": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dev-ip/-/dev-ip-1.0.1.tgz",
@@ -4351,6 +4425,16 @@
       "resolved": "https://registry.npmjs.org/entities/-/entities-1.0.0.tgz",
       "integrity": "sha1-sph6o4ITR/zeZCsk/fyeT7cSvyY="
     },
+    "envify": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/envify/-/envify-3.4.1.tgz",
+      "integrity": "sha1-1xIjKejfFoi6dxsSUBkXyc5cvOg=",
+      "dev": true,
+      "requires": {
+        "jstransform": "11.0.3",
+        "through": "2.3.8"
+      }
+    },
     "enzyme": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/enzyme/-/enzyme-3.2.0.tgz",
@@ -9053,6 +9137,42 @@
         "verror": "1.10.0"
       }
     },
+    "jstransform": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/jstransform/-/jstransform-11.0.3.tgz",
+      "integrity": "sha1-CaeJk+CuTU70SH9hVakfYZDLQiM=",
+      "dev": true,
+      "requires": {
+        "base62": "1.2.1",
+        "commoner": "0.10.8",
+        "esprima-fb": "15001.1.0-dev-harmony-fb",
+        "object-assign": "2.1.1",
+        "source-map": "0.4.4"
+      },
+      "dependencies": {
+        "esprima-fb": {
+          "version": "15001.1.0-dev-harmony-fb",
+          "resolved": "https://registry.npmjs.org/esprima-fb/-/esprima-fb-15001.1.0-dev-harmony-fb.tgz",
+          "integrity": "sha1-MKlHMDxrjV6VW+4rmbHSMyBqaQE=",
+          "dev": true
+        },
+        "object-assign": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-2.1.1.tgz",
+          "integrity": "sha1-Q8NuXVaf+OSBbE76i+AtJpZ8GKo=",
+          "dev": true
+        },
+        "source-map": {
+          "version": "0.4.4",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
+          "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
+          "dev": true,
+          "requires": {
+            "amdefine": "1.0.1"
+          }
+        }
+      }
+    },
     "jstransformer": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/jstransformer/-/jstransformer-0.0.2.tgz",
@@ -10021,6 +10141,12 @@
       "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
       "integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc="
     },
+    "lodash.camelcase": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+      "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=",
+      "dev": true
+    },
     "lodash.clone": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.clone/-/lodash.clone-4.5.0.tgz",
@@ -10096,6 +10222,12 @@
       "integrity": "sha1-+4m2WpqAKBgz8LdHizpRBPiY67M=",
       "dev": true
     },
+    "lodash.kebabcase": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz",
+      "integrity": "sha1-hImxyw0p/4gZXM7KRI/21swpXDY=",
+      "dev": true
+    },
     "lodash.keys": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz",
@@ -10152,6 +10284,12 @@
       "integrity": "sha1-k2pOMJ7zMKdkXtQUWYbIWuWyCAU=",
       "dev": true
     },
+    "lodash.snakecase": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.snakecase/-/lodash.snakecase-4.1.1.tgz",
+      "integrity": "sha1-OdcUo1NXFHg3rv1ktdy7Fr7Nj40=",
+      "dev": true
+    },
     "lodash.some": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/lodash.some/-/lodash.some-4.6.0.tgz",
@@ -13138,6 +13276,12 @@
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
       "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4="
     },
+    "q": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
+      "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=",
+      "dev": true
+    },
     "qs": {
       "version": "6.5.1",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.1.tgz",
@@ -13594,6 +13738,26 @@
         }
       }
     },
+    "recast": {
+      "version": "0.11.23",
+      "resolved": "https://registry.npmjs.org/recast/-/recast-0.11.23.tgz",
+      "integrity": "sha1-RR/TAEqx5N+bTktmN2sqIZEkYtM=",
+      "dev": true,
+      "requires": {
+        "ast-types": "0.9.6",
+        "esprima": "3.1.3",
+        "private": "0.1.8",
+        "source-map": "0.5.7"
+      },
+      "dependencies": {
+        "esprima": {
+          "version": "3.1.3",
+          "resolved": "https://registry.npmjs.org/esprima/-/esprima-3.1.3.tgz",
+          "integrity": "sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM=",
+          "dev": true
+        }
+      }
+    },
     "rechoir": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
@@ -17385,6 +17549,76 @@
         }
       }
     },
+    "webpack-visualizer-plugin": {
+      "version": "0.1.11",
+      "resolved": "https://registry.npmjs.org/webpack-visualizer-plugin/-/webpack-visualizer-plugin-0.1.11.tgz",
+      "integrity": "sha1-uHcK2GtPZSYSxosbeCJT+vn4o04=",
+      "dev": true,
+      "requires": {
+        "d3": "3.5.17",
+        "mkdirp": "0.5.1",
+        "react": "0.14.9",
+        "react-dom": "0.14.9"
+      },
+      "dependencies": {
+        "asap": {
+          "version": "2.0.6",
+          "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+          "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=",
+          "dev": true
+        },
+        "core-js": {
+          "version": "1.2.7",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+          "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=",
+          "dev": true
+        },
+        "fbjs": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.6.1.tgz",
+          "integrity": "sha1-lja3cF9bqWhNRLcveDISVK/IYPc=",
+          "dev": true,
+          "requires": {
+            "core-js": "1.2.7",
+            "loose-envify": "1.3.1",
+            "promise": "7.3.1",
+            "ua-parser-js": "0.7.17",
+            "whatwg-fetch": "0.9.0"
+          }
+        },
+        "promise": {
+          "version": "7.3.1",
+          "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+          "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+          "dev": true,
+          "requires": {
+            "asap": "2.0.6"
+          }
+        },
+        "react": {
+          "version": "0.14.9",
+          "resolved": "https://registry.npmjs.org/react/-/react-0.14.9.tgz",
+          "integrity": "sha1-kRCmSXxJ1EuhwO3TF67CnC4NkdE=",
+          "dev": true,
+          "requires": {
+            "envify": "3.4.1",
+            "fbjs": "0.6.1"
+          }
+        },
+        "react-dom": {
+          "version": "0.14.9",
+          "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-0.14.9.tgz",
+          "integrity": "sha1-BQZKPc8PsYgKOyv8nVjFXY2fYpM=",
+          "dev": true
+        },
+        "whatwg-fetch": {
+          "version": "0.9.0",
+          "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-0.9.0.tgz",
+          "integrity": "sha1-DjaExsuZlbQ+/J3wPkw2XZX9nMA=",
+          "dev": true
+        }
+      }
+    },
     "weinre": {
       "version": "2.0.0-pre-I0Z7U9OV",
       "resolved": "https://registry.npmjs.org/weinre/-/weinre-2.0.0-pre-I0Z7U9OV.tgz",

package.json

@@ -143,6 +143,7 @@
     "babel-loader": "^6.2.1",
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-plugin-lodash": "^3.2.11",
+    "babel-plugin-transform-imports": "^1.4.1",
     "babel-preset-stage-0": "^6.3.13",
     "browser-sync": "^2.9.12",
     "chunk-manifest-webpack-plugin": "0.1.0",
@@ -189,6 +190,7 @@
     "webpack-hot-middleware": "^2.12.2",
     "webpack-manifest-plugin": "^1.0.0",
     "webpack-stream": "^3.1.0",
+    "webpack-visualizer-plugin": "^0.1.11",
     "yargs": "^7.0.1"
   },
   "snyk": true,

webpack.config.js

@@ -2,6 +2,7 @@ var webpack = require('webpack');
 var path = require('path');
 var ManifestPlugin = require('webpack-manifest-plugin');
 var ChunkManifestPlugin = require('chunk-manifest-webpack-plugin');
+const Visualizer = require('webpack-visualizer-plugin');
 
 var __DEV__ = process.env.NODE_ENV !== 'production';
 
@@ -60,7 +61,9 @@ module.exports = {
       'debug/src/browser'
     ),
     new webpack.optimize.DedupePlugin(),
-    new webpack.optimize.OccurenceOrderPlugin(true)
+    new webpack.optimize.OccurenceOrderPlugin(true),
+    // this will output a .html file in output.path
+    new Visualizer({ filename: 'webpack-bundle-stats.html' })
   ]
 };