From 1992efac635234b8589464aac117fcd61d9d5ab0 Mon Sep 17 00:00:00 2001 From: Jonathan del Strother Date: Thu, 1 Mar 2018 11:46:10 +0000 Subject: [PATCH 1/3] Fix parsing webpack 4's chunks Webpack 4 has a new chunk style, looking something like this: (window.webpackJsonp=window.webpackJsonp||[]).push([[27],{"57iH":function(e,n,t){console.log("hello world")}}]); --- src/parseUtils.js | 29 ++++++++++++++++++++ test/bundles/validWebpack4Chunk.js | 1 + test/bundles/validWebpack4Chunk.modules.json | 5 ++++ 3 files changed, 35 insertions(+) create mode 100644 test/bundles/validWebpack4Chunk.js create mode 100644 test/bundles/validWebpack4Chunk.modules.json diff --git a/src/parseUtils.js b/src/parseUtils.js index 71a872ab..58e2a3c8 100644 --- a/src/parseUtils.js +++ b/src/parseUtils.js @@ -71,6 +71,17 @@ function parseBundle(bundlePath) { return; } + // Additional bundles with webpack 4 are loaded with: + // (window.webpackJsonp=window.webpackJsonp||[]).push([[minimum ID], , ]); + if ( + isWindowPropertyPushExpression(node) && + args.length === 1 && + isArgumentContainingChunkIdsAndModulesList(args[0]) + ) { + state.locations = getModulesLocationFromFunctionArgument(args[0].elements[1]); + return; + } + // Walking into arguments because some of plugins (e.g. `DedupePlugin`) or some Webpack // features (e.g. `umd` library output) can wrap modules list into additional IIFE. _.each(args, arg => c(arg, state)); @@ -115,6 +126,17 @@ function isArgumentContainsModulesList(arg) { return false; } +function isArgumentContainingChunkIdsAndModulesList(arg) { + if ( + arg.type === 'ArrayExpression' && + isArgumentContainsChunkIds(arg.elements[0]) && + isArgumentContainsModulesList(arg.elements[1]) + ) { + return true; + } + return false; +} + function isArgumentArrayConcatContainingChunks(arg) { if ( arg.type === 'CallExpression' && @@ -141,6 +163,13 @@ function isArgumentArrayConcatContainingChunks(arg) { return false; } +function isWindowPropertyPushExpression(node) { + return node.callee.type === 'MemberExpression' && + node.callee.property.name === 'push' && + node.callee.object.type === 'AssignmentExpression' && + node.callee.object.left.object.name === 'window'; +} + function isModuleWrapper(node) { return ( // It's an anonymous function expression that wraps module diff --git a/test/bundles/validWebpack4Chunk.js b/test/bundles/validWebpack4Chunk.js new file mode 100644 index 00000000..94521215 --- /dev/null +++ b/test/bundles/validWebpack4Chunk.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{"57iH":function(e,n,t){console.log("hello world")}}]); diff --git a/test/bundles/validWebpack4Chunk.modules.json b/test/bundles/validWebpack4Chunk.modules.json new file mode 100644 index 00000000..9a5b191e --- /dev/null +++ b/test/bundles/validWebpack4Chunk.modules.json @@ -0,0 +1,5 @@ +{ + "modules": { + "57iH": "function(e,n,t){console.log(\"hello world\")}" + } +} From f51c13431c731ba251acf430908613dea948b886 Mon Sep 17 00:00:00 2001 From: Jonathan del Strother Date: Thu, 1 Mar 2018 13:46:50 +0000 Subject: [PATCH 2/3] Add tests for webpack4 modules with additional entrypoint ids --- src/parseUtils.js | 3 ++- test/bundles/validWebpack4ChunkAndEntryPoint.js | 1 + test/bundles/validWebpack4ChunkAndEntryPoint.modules.json | 5 +++++ 3 files changed, 8 insertions(+), 1 deletion(-) create mode 100644 test/bundles/validWebpack4ChunkAndEntryPoint.js create mode 100644 test/bundles/validWebpack4ChunkAndEntryPoint.modules.json diff --git a/src/parseUtils.js b/src/parseUtils.js index 58e2a3c8..4af62e34 100644 --- a/src/parseUtils.js +++ b/src/parseUtils.js @@ -72,7 +72,7 @@ function parseBundle(bundlePath) { } // Additional bundles with webpack 4 are loaded with: - // (window.webpackJsonp=window.webpackJsonp||[]).push([[minimum ID], , ]); + // (window.webpackJsonp=window.webpackJsonp||[]).push([[chunkId], [, ], [[optional_entries]]]); if ( isWindowPropertyPushExpression(node) && args.length === 1 && @@ -129,6 +129,7 @@ function isArgumentContainsModulesList(arg) { function isArgumentContainingChunkIdsAndModulesList(arg) { if ( arg.type === 'ArrayExpression' && + arg.elements.length >= 2 && isArgumentContainsChunkIds(arg.elements[0]) && isArgumentContainsModulesList(arg.elements[1]) ) { diff --git a/test/bundles/validWebpack4ChunkAndEntryPoint.js b/test/bundles/validWebpack4ChunkAndEntryPoint.js new file mode 100644 index 00000000..4f0d8071 --- /dev/null +++ b/test/bundles/validWebpack4ChunkAndEntryPoint.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{"57iH":function(e,n,t){console.log("hello world")}},[["57iH",19,24,25]]]); diff --git a/test/bundles/validWebpack4ChunkAndEntryPoint.modules.json b/test/bundles/validWebpack4ChunkAndEntryPoint.modules.json new file mode 100644 index 00000000..9a5b191e --- /dev/null +++ b/test/bundles/validWebpack4ChunkAndEntryPoint.modules.json @@ -0,0 +1,5 @@ +{ + "modules": { + "57iH": "function(e,n,t){console.log(\"hello world\")}" + } +} From 89febabcac3d83d3ac603ec9efdf4c3e99b3c9cb Mon Sep 17 00:00:00 2001 From: Jonathan del Strother Date: Thu, 1 Mar 2018 13:46:58 +0000 Subject: [PATCH 3/3] Update changelog --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 13c2b5a5..529d77a5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,9 @@ _Note: Gaps between patch versions are faulty, broken or test releases._ + * **Improvement** + * Add support for parsing Webpack 4's chunked modules ([#159](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/159), [@jdelStrother](https://github.com/jdelStrother)) + ## 2.11.0 * **Improvement**