From fafb53f11ea4cde63576ce97f8f52022afbfe506 Mon Sep 17 00:00:00 2001 From: Stuart Taylor Date: Mon, 1 Jan 2018 13:01:18 +0000 Subject: [PATCH] feat(bundle): Add bundle visualisation tool --- .gitignore | 2 +- package-lock.json | 204 ++++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + webpack.config.js | 5 +- 4 files changed, 210 insertions(+), 2 deletions(-) diff --git a/.gitignore b/.gitignore index dd1401f7cd..c591aad2cc 100644 --- a/.gitignore +++ b/.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 diff --git a/package-lock.json b/package-lock.json index 0efd404d0e..8c19c2271c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -511,6 +511,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", @@ -1828,6 +1834,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", @@ -3072,6 +3084,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", @@ -3954,6 +3998,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", @@ -4356,6 +4418,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", @@ -9076,6 +9148,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", @@ -13161,6 +13269,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", @@ -13617,6 +13731,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", @@ -17408,6 +17542,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", diff --git a/package.json b/package.json index b54207848a..dde0dadc0b 100644 --- a/package.json +++ b/package.json @@ -190,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, diff --git a/webpack.config.js b/webpack.config.js index c5f03aeccb..86d2af8cb7 100644 --- a/webpack.config.js +++ b/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' }) ] };