webpack-bundle-analyzer
webpack-bundle-analyzer copied to clipboard
webpack-contrib
Chunk contents are lost with some values of `output.libraryTarget`
Issue description
When using global, window, this, commonjs, commonjs2, or assign as output.libraryTarget, chunk contents are not displayed in report. var, umd, 'amd', 'amd-require', 'system', and 'jsonp' work OK.
Technical info
System:
OS: macOS 10.15.6
CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
Memory: 1.35 GB / 32.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.18.2 - ~/n/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.14.5 - ~/n/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
npmPackages:
webpack: ^4.43.0 => 4.43.0
webpack-bundle-analyzer: ^3.8.0 => 3.8.0
webpack-cli: ^3.3.12 => 3.3.12
Reproduction
https://github.com/Hypnosphi/webpack-bundle-analyzer-repro
Expected
Actual
Can you add some reproduction steps in the reproduction repository? What commands do I need to run to get to the same result?
I wonder if this is the expected result for libraryTarget: 'global'. You can however see the full sizes when using "stat" sizes.
The output bundle from the reproduction repository looks like so:
window.MyLibrary = (function (e) {
var t = {};
function r(n) {
if (t[n]) return t[n].exports;
var o = (t[n] = { i: n, l: !1, exports: {} });
return e[n].call(o.exports, o, o.exports, r), (o.l = !0), o.exports;
}
return (
(r.m = e),
(r.c = t),
(r.d = function (e, t, n) {
r.o(e, t) || Object.defineProperty(e, t, { enumerable: !0, get: n });
}),
(r.r = function (e) {
"undefined" != typeof Symbol &&
Symbol.toStringTag &&
Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }),
Object.defineProperty(e, "__esModule", { value: !0 });
}),
(r.t = function (e, t) {
if ((1 & t && (e = r(e)), 8 & t)) return e;
if (4 & t && "object" == typeof e && e && e.__esModule) return e;
var n = Object.create(null);
if (
(r.r(n),
Object.defineProperty(n, "default", { enumerable: !0, value: e }),
2 & t && "string" != typeof e)
)
for (var o in e)
r.d(
n,
o,
function (t) {
return e[t];
}.bind(null, o)
);
return n;
}),
(r.n = function (e) {
var t =
e && e.__esModule
? function () {
return e.default;
}
: function () {
return e;
};
return r.d(t, "a", t), t;
}),
(r.o = function (e, t) {
return Object.prototype.hasOwnProperty.call(e, t);
}),
(r.p = ""),
r((r.s = 0))
);
})([
function (e, t, r) {
"use strict";
r.r(t);
r(1);
},
function (e, t) {},
]);
The modules part of this bundle is the one after webpack setup code:
([
function (e, t, r) {
"use strict";
r.r(t);
r(1);
},
function (e, t) {},
]);
And when looking at this, it seems that indeed, only one module content is not blank there.
The webpack stats JSON looks like so:
{
"errors": [
],
"warnings": [
],
"version": "4.43.0",
"hash": "275c73f1f4e37ddf824c",
"time": 82,
"builtAt": 1595486128923,
"publicPath": "",
"outputPath": "/Users/vesa/code/muut/webpack-bundle-analyzer/issue-372-repro/dist",
"assetsByChunkName": {
"main": "main.js"
},
"assets": [
{
"name": "main.js",
"size": 995,
"chunks": [
0
],
"chunkNames": [
"main"
],
"info": {
},
"emitted": true
}
],
"filteredAssets": 0,
"entrypoints": {
"main": {
"chunks": [
0
],
"assets": [
"main.js"
],
"children": {
},
"childAssets": {
}
}
},
"namedChunkGroups": {
"main": {
"chunks": [
0
],
"assets": [
"main.js"
],
"children": {
},
"childAssets": {
}
}
},
"chunks": [
{
"id": 0,
"rendered": true,
"initial": true,
"entry": true,
"size": 18,
"names": [
"main"
],
"files": [
"main.js"
],
"hash": "226a5b72289872e0254f",
"siblings": [
],
"parents": [
],
"children": [
],
"childrenByOrder": {
},
"modules": [
{
"id": 0,
"identifier": "/Users/vesa/code/muut/webpack-bundle-analyzer/issue-372-repro/src/index.js",
"name": "./src/index.js",
"index": 0,
"index2": 1,
"size": 18,
"cacheable": true,
"built": true,
"optional": false,
"prefetched": false,
"chunks": [
0
],
"issuer": null,
"issuerId": null,
"issuerName": null,
"issuerPath": null,
"failed": false,
"errors": 0,
"warnings": 0,
"assets": [
],
"reasons": [
{
"moduleId": null,
"moduleIdentifier": null,
"module": null,
"moduleName": null,
"type": "single entry",
"userRequest": "./src",
"loc": "main"
}
],
"usedExports": true,
"providedExports": [
],
"optimizationBailout": [
"ModuleConcatenation bailout: Module is an entry point"
],
"depth": 0,
"source": "import './module'\n"
},
{
"id": 1,
"identifier": "/Users/vesa/code/muut/webpack-bundle-analyzer/issue-372-repro/src/module.js",
"name": "./src/module.js",
"index": 1,
"index2": 0,
"size": 0,
"cacheable": true,
"built": true,
"optional": false,
"prefetched": false,
"chunks": [
0
],
"issuer": "/Users/vesa/code/muut/webpack-bundle-analyzer/issue-372-repro/src/index.js",
"issuerId": 0,
"issuerName": "./src/index.js",
"issuerPath": [
{
"id": 0,
"identifier": "/Users/vesa/code/muut/webpack-bundle-analyzer/issue-372-repro/src/index.js",
"name": "./src/index.js"
}
],
"failed": false,
"errors": 0,
"warnings": 0,
"assets": [
],
"reasons": [
{
"moduleId": 0,
"moduleIdentifier": "/Users/vesa/code/muut/webpack-bundle-analyzer/issue-372-repro/src/index.js",
"module": "./src/index.js",
"moduleName": "./src/index.js",
"type": "harmony side effect evaluation",
"userRequest": "./module",
"loc": "1:0-17"
}
],
"usedExports": false,
"providedExports": null,
"optimizationBailout": [
"ModuleConcatenation bailout: Module is not an ECMAScript module"
],
"depth": 1,
"source": ""
}
],
"filteredModules": 0,
"origins": [
{
"module": "",
"moduleIdentifier": "",
"moduleName": "",
"loc": "main",
"request": "./src",
"reasons": [
]
}
]
}
],
"modules": [
{
"id": 0,
"identifier": "/Users/vesa/code/muut/webpack-bundle-analyzer/issue-372-repro/src/index.js",
"name": "./src/index.js",
"index": 0,
"index2": 1,
"size": 18,
"cacheable": true,
"built": true,
"optional": false,
"prefetched": false,
"chunks": [
0
],
"issuer": null,
"issuerId": null,
"issuerName": null,
"issuerPath": null,
"failed": false,
"errors": 0,
"warnings": 0,
"assets": [
],
"reasons": [
{
"moduleId": null,
"moduleIdentifier": null,
"module": null,
"moduleName": null,
"type": "single entry",
"userRequest": "./src",
"loc": "main"
}
],
"usedExports": true,
"providedExports": [
],
"optimizationBailout": [
"ModuleConcatenation bailout: Module is an entry point"
],
"depth": 0,
"source": "import './module'\n"
},
{
"id": 1,
"identifier": "/Users/vesa/code/muut/webpack-bundle-analyzer/issue-372-repro/src/module.js",
"name": "./src/module.js",
"index": 1,
"index2": 0,
"size": 0,
"cacheable": true,
"built": true,
"optional": false,
"prefetched": false,
"chunks": [
0
],
"issuer": "/Users/vesa/code/muut/webpack-bundle-analyzer/issue-372-repro/src/index.js",
"issuerId": 0,
"issuerName": "./src/index.js",
"issuerPath": [
{
"id": 0,
"identifier": "/Users/vesa/code/muut/webpack-bundle-analyzer/issue-372-repro/src/index.js",
"name": "./src/index.js"
}
],
"failed": false,
"errors": 0,
"warnings": 0,
"assets": [
],
"reasons": [
{
"moduleId": 0,
"moduleIdentifier": "/Users/vesa/code/muut/webpack-bundle-analyzer/issue-372-repro/src/index.js",
"module": "./src/index.js",
"moduleName": "./src/index.js",
"type": "harmony side effect evaluation",
"userRequest": "./module",
"loc": "1:0-17"
}
],
"usedExports": false,
"providedExports": null,
"optimizationBailout": [
"ModuleConcatenation bailout: Module is not an ECMAScript module"
],
"depth": 1,
"source": ""
}
],
"filteredModules": 0,
"logging": {
"webpack.buildChunkGraph.visitModules": {
"entries": [
],
"filteredEntries": 2,
"debug": false
}
},
"children": [
]
}
I'm not yet sure if the outcome for this reproduction is correct or not. The reproduction might need to have more contents in the modules (i.e. no empty source files) to see what's broken.
Ok when I put some more contents in the source files like so:
import './module';
console.log('This is index.js');
console.log("Hello from module.js");
and generate a JSON report with
new BundleAnalyzerPlugin({
analyzerMode: 'json'
})
the generated JSON report looks like this:
[
{
"label": "main.js",
"isAsset": true,
"statSize": 89,
"parsedSize": 1062,
"gzipSize": 518,
"groups": [
{
"label": "src",
"path": "./src",
"statSize": 89,
"groups": [
{
"id": 0,
"label": "index.js",
"path": "./src/index.js",
"statSize": 52
},
{
"id": 1,
"label": "module.js",
"path": "./src/module.js",
"statSize": 37
}
],
"parsedSize": 0,
"gzipSize": 0
}
]
}
]
while the bundled output modules looked like so:
([
function (e, r, t) {
"use strict";
t.r(r);
t(1);
console.log("This is index.js");
},
function (e, r) {
console.log("Hello from module.js");
},
])
So the report does seem to indicate (with the lack of parsedSize and gzipSize for all files in sub-groups) that webpack-bundle-analyzer is unable to find the modules from the bundle output here.
We might want to incorporate all of the different libraryTarget outputs from https://github.com/Hypnosphi/webpack-bundle-analyzer-repro/pull/1 and test against them, so that we always use the same source files and the only change that happens is what output.libraryTarget is.
Has there been any progress? So far I use source-map-explorer instead, but it's not accurate enough. Hoping to see a bugfix soon, because webpack-bundle-analyzer is very useful :)
Nowadays we're able to test running with different webpack versions.
I'd be happy to see a PR that adds test coverage for all the different libraryTarget values so we could get the infrastructure ready for further bundle parser development ☺️