[Feature] support code splitting?

[hacker112]

Before I used webpack I was able to share some common libs with main code and the worker through a separate file that was loaded on both sides.

I see that CommonsChunkPlugin separate libs from app code. When I use it I see that my main javascript file gets smaller but my worker file stays the same even though they both use common libs.

Is there any way I can get it to optimize the worker size also (so that it uses the common script file)?

[bartsmykla]

+1

[michael-ciniawsky]

Could you try to give an example for that please?

[hacker112]

Absolutely!

Imagine that you are using lodash, bluebird etc. from a common file (common.js) and you need the libs in common.js in both "normal code" and "worker code". Before using webpack I could add common.js to my index.html file and import it in my worker with self.importScripts('common.js'); (https://developer.mozilla.org/en-US/docs/Web/API/WorkerGlobalScope/importScripts)

Since common.js would be cached by the browser it would only be loaded once. With webpack I see that my worker has all the libs included in worker.js but it could have included my common.js that is a common chunk used by all my apps.

[the-spyke]

I have a similar question. I use lodash in both main chunk and web worker chunk. Right now it's bundled with both chunks. I assume that I need somehow to create a common chunk. How to configure this properly?

[jnields]

I created an example of this problem at this repo.

While importScripts can be used to include webpack bootstrap functions / commons chunks, you don't have enough info to actually require the modules you need. This should be done in either worker-loader or in another plugin and not manually... though I don't know enough about plugin / loader development to provide a solution

[michael-ciniawsky]

// TODO remove and tand make this functionality a loader option instead, 
// since this doesn't work with webpack > v2.0.0 anymore
if (this.options && this.options.worker && this.options.worker.plugins) {
  this.options.worker.plugins.forEach(plugin => worker.compiler.apply(plugin));
}

webpack.config.js

{
  test: /\.worker\.js$/,
  use: {
    loader: 'worker-loader',
    options: {
      plugins: [ new CommonChunksPlugin() ]
    }
  }
}

[roysudi]

@michael-ciniawsky , @d3viant0ne -

I have a similar ask for my application. My web worker has to currently wrap rxjs, lodash etc for it's operations while I already have a vendor utility JS spit out by webpack.

Looking for some help/suggestions.

webpack: v3.8.1 worker-loader: v0.8.1

Thanks, Suds

[dakom]

Fwiw the plugin works fine for me when using a shim like this:

const window = self;

importScripts("vendor.bundle.js");
importScripts("worker.bundle.js");

A shim is necessary because the worker needs the bootstrapping code to be loaded first. In the main app this is done by simply importing via the webpage, but here the worker must import it (and hence the "worker", or in this case the shim, must already be loaded)

The way I use the shim here is in a plain js file that is not processed through webpack (and hence does not need the bootstrapping code)

The bootstrapping code tries to use window instead of self, so assigning window to self fixes that ;)

[roysudi]

@dakom thanks for the response! Would it be possible for you to copy/highlight the plain js code you mentioned?

[dakom]

hi @roysudi - believe it or not, that snippet above is the entire plain js code :)

[TCMiranda]

This issue is also being discussed at: https://github.com/webpack/webpack/issues/6472

[FranckFreiburger]

I wondering if it is possible to factorize duplicate code using DllPlugin ?