From 68411696182a851b909baeff4daa14e121b46ab7 Mon Sep 17 00:00:00 2001 From: Alan Date: Sun, 30 Jul 2017 16:20:49 +0200 Subject: [PATCH 1/5] Allow webpack modules to be wrapped in arrow functions. --- src/parseUtils.js | 2 +- test/bundles/validBundleWithArrowFunction.js | 3 +++ test/bundles/validBundleWithArrowFunction.modules.json | 5 +++++ 3 files changed, 9 insertions(+), 1 deletion(-) create mode 100644 test/bundles/validBundleWithArrowFunction.js create mode 100644 test/bundles/validBundleWithArrowFunction.modules.json diff --git a/src/parseUtils.js b/src/parseUtils.js index 1fbeb314..71a872ab 100644 --- a/src/parseUtils.js +++ b/src/parseUtils.js @@ -144,7 +144,7 @@ function isArgumentArrayConcatContainingChunks(arg) { function isModuleWrapper(node) { return ( // It's an anonymous function expression that wraps module - (node.type === 'FunctionExpression' && !node.id) || + ((node.type === 'FunctionExpression' || node.type === 'ArrowFunctionExpression') && !node.id) || // If `DedupePlugin` is used it can be an ID of duplicated module... isModuleId(node) || // or an array of shape [, ...args] diff --git a/test/bundles/validBundleWithArrowFunction.js b/test/bundles/validBundleWithArrowFunction.js new file mode 100644 index 00000000..d7a89c65 --- /dev/null +++ b/test/bundles/validBundleWithArrowFunction.js @@ -0,0 +1,3 @@ +webpackJsonp([0],[(t,e,r)=>{ + console.log("Hello world!"); +}]); diff --git a/test/bundles/validBundleWithArrowFunction.modules.json b/test/bundles/validBundleWithArrowFunction.modules.json new file mode 100644 index 00000000..76d7f5f2 --- /dev/null +++ b/test/bundles/validBundleWithArrowFunction.modules.json @@ -0,0 +1,5 @@ +{ + "modules": { + "0": "(t,e,r)=>{\n console.log(\"Hello world!\");\n}" + } +} From 7b17e9893161ca63599ee141a77de4121de3a4c5 Mon Sep 17 00:00:00 2001 From: th0r Date: Fri, 4 Aug 2017 17:45:27 +0300 Subject: [PATCH 2/5] Add chunk sizes to sidebar --- client/components/CheckboxList.jsx | 16 ++++++++++------ client/components/CheckboxListItem.jsx | 26 +++++++++++++++++++++----- client/components/ModulesTreemap.jsx | 22 ++++++++++++++++++---- client/components/Sidebar.jsx | 23 +++++++++++++++++++---- client/utils.js | 5 ----- 5 files changed, 68 insertions(+), 24 deletions(-) delete mode 100644 client/utils.js diff --git a/client/components/CheckboxList.jsx b/client/components/CheckboxList.jsx index 48f448c0..2ebcec8c 100644 --- a/client/components/CheckboxList.jsx +++ b/client/components/CheckboxList.jsx @@ -4,12 +4,12 @@ import { h, Component } from 'preact'; import CheckboxListItem from './CheckboxListItem'; import s from './CheckboxList.css'; -const ALL_ITEM = { - label: 'All' -}; +const ALL_ITEM = Symbol('ALL_ITEM'); export default class CheckboxList extends Component { + static ALL_ITEM = ALL_ITEM; + constructor(props) { super(props); this.state = { @@ -36,7 +36,7 @@ export default class CheckboxList extends Component { } render() { - const { label, items } = this.props; + const { label, items, renderLabel } = this.props; return (
@@ -46,12 +46,16 @@ export default class CheckboxList extends Component {
+ onChange={this.handleToggleAllCheck}> + {renderLabel} + {items.map(item => + onChange={this.handleItemCheck}> + {renderLabel} + )}
diff --git a/client/components/CheckboxListItem.jsx b/client/components/CheckboxListItem.jsx index ceccc083..1a96baeb 100644 --- a/client/components/CheckboxListItem.jsx +++ b/client/components/CheckboxListItem.jsx @@ -1,24 +1,40 @@ /** @jsx h */ import { h, Component } from 'preact'; +import CheckboxList from './CheckboxList'; + import s from './CheckboxList.css'; export default class CheckboxListItem extends Component { render() { - const { item, checked } = this.props; + const { checked } = this.props; return ( ); } + renderLabel() { + const { children, item } = this.props; + + if (children && children.length) { + return children[0](item, s.itemText); + } + + return ( + + {item === CheckboxList.ALL_ITEM ? 'All' : item.label} + + ); + } + handleChange = () => { this.props.onChange(this.props.item); } diff --git a/client/components/ModulesTreemap.jsx b/client/components/ModulesTreemap.jsx index bd9e04ca..8e4b76bf 100644 --- a/client/components/ModulesTreemap.jsx +++ b/client/components/ModulesTreemap.jsx @@ -10,8 +10,6 @@ import CheckboxList from './CheckboxList'; import s from './ModulesTreemap.css'; -import { compareStrings } from '../utils'; - const SIZE_SWITCH_ITEMS = [ { label: 'Stat', prop: 'statSize' }, { label: 'Parsed', prop: 'parsedSize' }, @@ -47,6 +45,8 @@ export default class ModulesTreemap extends Component {
} @@ -77,6 +77,16 @@ export default class ModulesTreemap extends Component { null; } + renderChunkItemLabel = (item, labelClass) => { + const isAllItem = (item === CheckboxList.ALL_ITEM); + const label = isAllItem ? 'All' : item.label; + const size = isAllItem ? this.totalChunksSize : item[this.state.activeSizeItem.prop]; + + return ( + {label} ({filesize(size)}) + ); + }; + handleSizeSwitch = sizeSwitchItem => { this.setState({ activeSizeItem: sizeSwitchItem }); }; @@ -103,6 +113,11 @@ export default class ModulesTreemap extends Component { } }; + get totalChunksSize() { + const sizeProp = this.state.activeSizeItem.prop; + return this.props.data.reduce((totalSize, chunk) => totalSize + chunk[sizeProp], 0); + } + setData(data, initial) { const hasParsedSizes = (typeof data[0].parsedSize === 'number'); this.sizeSwitchItems = hasParsedSizes ? SIZE_SWITCH_ITEMS : SIZE_SWITCH_ITEMS.slice(0, 1); @@ -111,8 +126,7 @@ export default class ModulesTreemap extends Component { if (!activeSizeItem) activeSizeItem = this.sizeSwitchItems[0]; const chunkItems = [...data] - .sort((chunk1, chunk2) => compareStrings(chunk1.label, chunk2.label)) - .map(chunk => ({ label: chunk.label })); + .sort((chunk1, chunk2) => chunk2[activeSizeItem.prop] - chunk1[activeSizeItem.prop]); if (initial) { this.visibleChunkItems = chunkItems; diff --git a/client/components/Sidebar.jsx b/client/components/Sidebar.jsx index 37135867..e673e4b0 100644 --- a/client/components/Sidebar.jsx +++ b/client/components/Sidebar.jsx @@ -11,20 +11,23 @@ export default class Sidebar extends Component { }; state = { - visible: true + visible: true, + renderContent: true }; componentDidMount() { this.hideTimeoutId = setTimeout(() => this.toggleVisibility(false), 1500); + this.hideContentTimeout = null; } componentWillUnmount() { - clearInterval(this.hideTimeoutId); + clearTimeout(this.hideTimeoutId); + clearTimeout(this.hideContentTimeout); } render() { const { position, children } = this.props; - const { visible } = this.state; + const { visible, renderContent } = this.state; const className = cls({ [s.container]: true, @@ -36,7 +39,7 @@ export default class Sidebar extends Component {
- {children} + {renderContent ? children : null}
); } @@ -49,7 +52,19 @@ export default class Sidebar extends Component { handleMouseLeave = () => this.toggleVisibility(false); toggleVisibility(flag) { + clearTimeout(this.hideContentTimeout); + this.setState({ visible: flag }); + + if (flag) { + this.setState({ renderContent: true }); + } else { + // Waiting for the CSS animation to finish and hiding content + this.hideContentTimeout = setTimeout( + () => this.setState({ renderContent: false }), + 500 + ); + } } } diff --git a/client/utils.js b/client/utils.js deleted file mode 100644 index 9c6109a8..00000000 --- a/client/utils.js +++ /dev/null @@ -1,5 +0,0 @@ -export function compareStrings(str1, str2) { - if (str1 < str2) return -1; - if (str2 < str1) return 1; - return 0; -} From 8185d5f4fa365f8c4124621185303c648a7329b1 Mon Sep 17 00:00:00 2001 From: th0r Date: Fri, 4 Aug 2017 18:21:04 +0300 Subject: [PATCH 3/5] v2.9.0 --- CHANGELOG.md | 7 +++++++ package.json | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7a291a3c..db3ee0fd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,13 @@ _Note: Gaps between patch versions are faulty, broken or test releases._ +## 2.9.0 + * **New Feature** + * Show chunk sizes in sidebar (closes #91) + + * **Bug Fix** + * Properly parse webpack bundles that use arrow functions as module wrappers (#108, @regiontog) + ## 2.8.3 * **Bug Fix** * Correctly advertise port when using a random one (#89, @yannickcr) diff --git a/package.json b/package.json index b9e8c3c1..718c0510 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "webpack-bundle-analyzer", - "version": "2.8.3", + "version": "2.9.0", "description": "Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap", "author": "Yury Grunin ", "license": "MIT", From 03aa6ff2a42ab69d142cea8e1d88427f98574d8d Mon Sep 17 00:00:00 2001 From: Vesa Laakso Date: Sat, 23 Sep 2017 19:33:29 +0300 Subject: [PATCH 4/5] Add info about ModuleConcatenationPlugin to README.md --- README.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/README.md b/README.md index a5ae4074..3e056f2d 100644 --- a/README.md +++ b/README.md @@ -110,6 +110,14 @@ as Uglify, then this value will reflect the minified size of your code. This is the size of running the file(s) through gzip compression. +## Troubleshooting + +### I can't see all the depencies in a chunk + +This is a known caveat when `webpack.optimize.ModuleConcatenationPlugin` is used. The way `ModuleConcatenationPlugin` works is that it merges multiple modules into a single one, and so that resulting module doesn't have edges anymore. + +If you are interested to drill down to exact dependencies, try analyzing your bundle without `ModuleConcatenationPlugin`. See [issue #115](https://github.com/th0r/webpack-bundle-analyzer/issues/115) for more discussion. + ## Contributing Check out [CONTRIBUTING.md](./CONTRIBUTING.md) for instructions on contributing :tada: From 23051564ad5c3c0de7e992ab91b3c7aac71b8907 Mon Sep 17 00:00:00 2001 From: Vesa Laakso Date: Sat, 23 Sep 2017 20:54:45 +0300 Subject: [PATCH 5/5] Fix typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 3e056f2d..ff6f2887 100644 --- a/README.md +++ b/README.md @@ -112,7 +112,7 @@ This is the size of running the file(s) through gzip compression. ## Troubleshooting -### I can't see all the depencies in a chunk +### I can't see all the dependencies in a chunk This is a known caveat when `webpack.optimize.ModuleConcatenationPlugin` is used. The way `ModuleConcatenationPlugin` works is that it merges multiple modules into a single one, and so that resulting module doesn't have edges anymore.