Angular 5 Webpack 4 Rxjs 5 DllPlugin - Duplicated RxJs everywhere

Question

I'm using :

"webpack": "4.12.0",    
"rxjs": "5.5.9",
"@angular" : "5.2.11"

and bundling libs with DDL Plugin.

{
    entry: 
    {"rxjs_5_5_9": [
      "rxjs
    ],
    "angular_5_2_11": [
      "@angular/common",
      "@angular/compiler",
      "@angular/core",
      "@angular/http",
      "@angular/platform-browser",
      "@angular/platform-browser-dynamic",
      "@angular/router",
      "@angular/service-worker",
      "zone.js"
    ], (...) , "pck_libs_5_x_x": [
      "pck-referentiel"
    ]},
    output: {
      filename: "[name].bundle.js",
      path: TARGET_PATH + "/vendors/",
      library: '[name]_lib'
    },
    plugins: [
      new webpack.DllPlugin({
        context: '.',
        name: '[name]_lib',
        path: TARGET_PATH + "/vendor-[name]-manifest.json",
      }),
    ]
  };

I have, as you can see above, declared Rxjs as a separated bundle. My custom library, pck-referentiel , uses rxjs and imports it 99% of the time with :

import {Observable} from "rxjs/Rx";

And here is the result :

(I circled every duplicated rxjs)

We can clearly see that rxjs is scattered amongst all various third-party libs, including mine.

What is the correct way to reference RxJs with DllPlugin so as it is not duplicated in every module that import it ?

score 0 · Accepted Answer · answered Jun 22 '18 at 11:26

0

Those are from your third party dependent packages, which internally depend on rxjs and not the one which you have added as dependency package (rxjs). You can clearly see the duplicate rxjs boxed inside other third party packages.

So they will be imported duplicate (cannot say duplicate, because they might vary by sub modules within rxjs) inside the vendor bundle.

answered Jun 22 '18 at 11:26

Amit Chigadani

28,482
13
80
98

Yes, but it is the same version. Why does the dll plugin duplicates them ? Isn't it supposed to detect that rxjs is currenlty packaged and then reference it without duplicating it ? – M'λ' Jun 22 '18 at 11:36

score 0 · Answer 2 · answered Jun 22 '18 at 13:42

Ok... thanks to Amit Chigadani's answer, I started to suspect that my understanding of the DLLPlugin was wrong. I was seeing it as a CommonChunkPlugin, able to deduplicate modules and cross reference them. Alas, I was wrong. So I endend up doing two DllPlugin pass : one for shared libs, one for frameworks that use them, reusing the previously generated manifest files.. and it seems to work !

It gives a lot of extra build configuration works, but it works (until now...) !

Angular 5 Webpack 4 Rxjs 5 DllPlugin - Duplicated RxJs everywhere

2 Answers2