Webpack-bundle-analyzer: Doesn't parse child workerize'd module

[wclr]

Issue description

I use https://github.com/developit/workerize-loader to bundle some scripts for webworker, but bundle analizer doesn't parse and display it.

Technical info

• Webpack Bundle Analyzer version: 2.10.0
• Webpack version: 3.5.5.

As you see there is not worker module in the map:

[valscion]

Nice find! Would you be able to provide a webpack stats JSON object for your build so we could take a closer look? If you don't want to share the stats JSON, could you create a small reproduction repository which showcases this issue?

It could be that worker chunks are a bit different, and we'd need to do extra work to be able to get them in to the visualization.

[wclr]

Think for you a better way to get what you need will be just adding basic workerized module test, just following instructions in the readme:

Install

npm install -D workerize-loader

Usage

worker.js:

// block for `time` ms, then return the number of loops we could run in that time:
export function expensive(time) {
    let start = Date.now(),
        count = 0
    while (Date.now() - start < time) count++
    return count
}

index.js: _(our demo)_

import worker from 'workerize-loader!./worker'

let instance = worker()  // `new` is optional

instance.expensive(1000).then( count => {
    console.log(`Ran ${count} loops`)
})

[valscion]

Setting up a new project is too much trouble right now for the time I have. Would you be able to setup an example project with this where the stats.json could be generated easily?

[wclr]

Will try.

[brendanmoore]

Same issue with worker-loader

A snippet from my stats file

    {
      "name": "static/js/958ecd6b.worker.js",
      "size": 5622520,
      "chunks": [],
      "chunkNames": [],
      "emitted": true,
      "isOverSizeLimit": true
    }

Ignored because chunks is empty: (analyzer.js)

 // Picking only `*.js` assets from bundle that has non-empty `chunks` array
  bundleStats.assets = _.filter(bundleStats.assets, asset => {
    // Removing query part from filename (yes, somebody uses it for some reason and Webpack supports it)
    // See #22
    asset.name = asset.name.replace(FILENAME_QUERY_REGEXP, '');

    return _.endsWith(asset.name, '.js') && !_.isEmpty(asset.chunks);
  });

https://github.com/webpack-contrib/webpack-bundle-analyzer/blob/master/src/analyzer.js#L34

[nolanlawson]

I ran into this same issue with my OSS project Pinafore. Unfortunately I couldn't manage to write a minimal repro; my minimal repro still shows worker.js correctly in Webpack Bundle Analyzer.

It's not a _minimal_ repro, but if you'd like to repro the issue, you can do:

git clone https://github.com/nolanlawson/pinafore.git
cd pinafore
git checkout 65c026a3
npm i
npm run build

Then open up ./.sapper/client/report.html to see the report.

[valscion]

Thanks @nolanlawson! Those repro steps will likely be useful once we get to debugging this

[th0r]

@nolanlawson do you still face this issue?

[wclr]

@nolanlawson do you still face this issue?

I'm using [email protected], should I upgrade to see the issue disappear?

[valscion]

Maybe try upgrading and report back if this is still an issue @whitecolor?

[wclr]

Maybe try upgrading and report back if this is still an issue @whitecolor?

No, nothing changed, I don't see workerized bundles.

[valscion]

Thanks for testing

[masterkidan]

Any update on this issue?

[valscion]

A minimal reproduction repository would help decipher what's happening

[masterkidan]

Can you not use Nolan's example above?

[valscion]

This makes it more difficult:

Unfortunately I couldn't manage to write a minimal repro

[universse]

I'm facing the same problem. Hopefully this repro can help https://github.com/universse/workerize-bundle

It's a gatsby app. The relevant config is in gatsby-node.js. Worker code is in src/firebase.worker.js, which I import in pages/index.js.

[valscion]

Ok good to know that it happens with small tweaks to gatsby default configuration. Would be ace if we could have a reproduction with only webpack — so we wouldn't have to decipher what parts in the gatsby+webpack combination cause this failure.

[nolanlawson]

I'm still running into this issue, and haven't been able to find a minimal repro unfortunately. (My repro steps above should still work, though. :slightly_smiling_face:)

Mistaken analysis, click to view

That said, I analyzed a bit using node --inspect, and I noticed that at this line of code, the stats object already doesn't contain the worker asset inside of stats.toJson().assets:

https://github.com/webpack-contrib/webpack-bundle-analyzer/blob/7cefb5821053f550754b4fef3ca5a57ce49dc957/src/BundleAnalyzerPlugin.js#L36-L37

I checked by doing stats.toJson().assets.filter(_ => _.name.includes('worker')) (my asset happens to include worker in there). I don't see it in stats.toJson().chunks either.

Oddly, though, the asset _is_ inside of stats.compilation.assets. So it looks like this may be an issue with the stats.toJson() function? I notice that it accepts several options, but we aren't passing any in. Maybe one of these options would show the missing worker asset?

_Edit: please ignore the above, I was wrong. The worker asset is indeed in the stats.toJson().assets array. I need to keep debugging! :slightly_smiling_face:_

My versions are [email protected] and [email protected].

[valscion]

Yeah if anyone who is stumbling on this is willing to debug further and even propose a fix, it would make it more likely that this would get fixed :smile:

I don't myself need this support yet, and I don't have extra time to prioritize fixing this bug unfortunately.

[nolanlawson]

I think I've managed to track this issue down. It seems that my worker assets have asset.chunks.length === 0. So when it gets to this line of code, it gets filtered out:

https://github.com/webpack-contrib/webpack-bundle-analyzer/blob/7cefb5821053f550754b4fef3ca5a57ce49dc957/src/analyzer.js#L39

When I remove the !_.isEmpty(asset.chunks) check, then I correctly see my worker assets in the Webpack Bundle Analyzer view. I'm not sure what this empty check was doing, though. Is it safe to remove?

[valscion]

I don't know, it has originally been added first for v1.3.0 in https://github.com/webpack-contrib/webpack-bundle-analyzer/commit/0d03f0ad184c5c34b9f3e71d2404e8b6777f05bb and I haven't been around then. @th0r, any ideas?

[masterkidan]

https://github.com/masterkidan/worker-loader-no-stats

@valscion : Apologies for the really slow repro on this, but here's a minimal repro
run yarn build:analyze and you will see the following

where the assets created by the worker-loader are not present. I think this is related to the earlier fact that childChunks are not being computed for worker assets for some reason
despite the fact that chunk is outputed

timeout-worker.js -> bundle.worker.js

[masterkidan]

@nolanlawson : While I do agree that your fix produces the bundle, its very hard to perform bundle reduction without understanding what the constituents of the bundle are. For that reason, I don't think that should be the fix here

[masterkidan]

After debugging a bit, it looks like this a rendering/display issue with analyzer.js, I've opened a PR with the fix that generates the view for the worker bundles as well @nolanlawson , can you see if it works for you?

[masterkidan]

@valscion , @th0r : If you could remove the repro needed tag on this bug, that would be great!... I am not sure if it is possible to create a more minimal repro than the one presented above.
Also I think that is the same as #368 , perhaps that can be closed off as a dupe of this one?

I would like to get the PR checked in if there are no issues with it, please let me know how you want to proceed.

[th0r]

@valscion @masterkidan does https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/376 fix this? Shall this issue be closed?

[masterkidan]

Yes I believe so