webpack-bundle-analyzer icon indicating copy to clipboard operation
webpack-bundle-analyzer copied to clipboard

Setting output.globalObject breaks parsed + gzip

Open ntucker opened this issue 5 years ago • 11 comments

Issue description

config.output.globalObject = "(typeof self !== 'undefined' ? self : this)"

Breaks parsed + gzip sizes. Removing it fixed them.

Technical info

  • Webpack Bundle Analyzer version: 3.3.2
  • Webpack version: 4.35.0
  • Node.js version: 11.10.0
  • npm/yarn version: 6.7.0
  • OS: mac os x; windows

Expected Behavior

Gzip and parsed should contain data bout more than just the output files - the modules inside them as well.

Actual Behavior

Only stats includes all modules. Gzip and parsed just show large blocks for each bundle piece (output file)

Code

My default:

config.output.globalObject = "(typeof self !== 'undefined' ? self : this)"

When I analyze:

delete config.output.globalObject;

ntucker avatar Jun 23 '19 13:06 ntucker

Sorry, I don't quite follow you. Is the piece of code you are referring to some part of webpack-bundle-analyzer or your own code?

valscion avatar Jul 02 '19 07:07 valscion

the config setting lines are setting the webpack config. This issue describes what happens to any bundle when the configuration is as such.

ntucker avatar Jul 02 '19 15:07 ntucker

I'm having a hard time figuring out what is exactly what's happening here. Can you create a small reproduction repository to show what's happening?

I'm afraid I can't help you otherwise

valscion avatar Jul 03 '19 06:07 valscion

https://webpack.js.org/configuration/output/#outputglobalobject This is the webpack configuration. You can use with any project. Just set that to "(typeof self !== 'undefined' ? self : this)" and add bundle analyzer

ntucker avatar Jul 03 '19 06:07 ntucker

But why would you use self or this in there? Do you mean 'this' instead of this?

valscion avatar Jul 03 '19 06:07 valscion

https://developer.mozilla.org/en-US/docs/Web/API/WorkerGlobalScope/self

ntucker avatar Jul 03 '19 14:07 ntucker

Yes but the webpack configuration expects you to put a string in there, not an object, unless I misunderstand the instructions in https://webpack.js.org/configuration/output/#outputglobalobject documentation you linked?

valscion avatar Jul 04 '19 06:07 valscion

"(typeof self !== 'undefined' ? self : this)" is a string literal. In javascript this is signified by the quotation marks surrounding the other characters.

ntucker avatar Jul 05 '19 05:07 ntucker

But it won't be evaluated as JS unless you put it in backticks? It means your string will be exactly what you write, not either 'self' or 'this'.

Was this what you have, or would need?

config.output.globalObject = (typeof self !== 'undefined' ? 'self' : 'this')

This code will not do any conditionals:

config.output.globalObject = "(typeof self !== 'undefined' ? self : this)"

The result will be only the raw string "(typeof self !== 'undefined' ? self : this)" as is, not self or this.

valscion avatar Jul 05 '19 08:07 valscion

But it won't be evaluated as JS unless you put it in backticks?

This string is inserted in the generated code as-is - it should not be evaluated at compile time.

E.g. imagine this bundle template:

var global = {{ config.globalObject }};

Then resulting bundle will be:

var global = (typeof self !== 'undefined' ? self : this);

th0r avatar Jul 05 '19 08:07 th0r

Oh wow, that wasn't obvious at all from the webpack documentation. Thanks for explaining.

valscion avatar Jul 05 '19 08:07 valscion