Big webpack chunks

[n-sviridenko]

Hello,

I have AppModule, few independent modules that are lazy-loaded and SharedModule. Each module imports the SharedModule.

app.routing.ts

Before using this plugin, I did it this way:

// ...

export function loadUsers() {
  return new Promise((resolve) => {
    (require as any).ensure([], (require) => {
      resolve(require('./user').UserModule);
    });
  });
}

// ...

export const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
  },
  {
    path: 'users',
    loadChildren: loadUsers,
  },
  // ...
];

export const routing = RouterModule.forRoot(routes);

With the plugin it's implemented this way:

// ...

export const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
  },
  {
    path: 'users',
    loadChildren: './user#UserModule',
  },
  // ...
];

export const routing = RouterModule.forRoot(routes);

It works perfect. But after I saw the difference between the chunk sizes:

without the plugin

                         0.a53a6e4438a7ff058bd5.chunk.js    45.9 kB       0  [emitted]
                         1.c204e312f1c3e6365fe3.chunk.js    40.9 kB       1  [emitted]
                         2.13c3c3a18fb6b8dc0f44.chunk.js    29.5 kB       2  [emitted]
                         3.e83b72e5e272d1b21325.chunk.js    28.4 kB       3  [emitted]

with the plugin

                         0.6501c7e619435970df40.chunk.js     543 kB       0  [emitted]  [big]
                         1.1c63e1858da33d8a9232.chunk.js     767 kB       1  [emitted]  [big]
                         2.56175054376f7915de7e.chunk.js     683 kB       2  [emitted]  [big]
                         3.51bcbb97a488de4fe0fa.chunk.js     365 kB       3  [emitted]  [big]

By looking at the chunks I've found the same code of the SharedModule in all of them.

Does somebody know how to resolve it?

Thanks

[jebuenga]

I get the same problem. @shlomiassaf, @n-sviridenko How do we tree shake the chunks to remove the common imports from Angular 2?

[shlomiassaf]

@n-sviridenko @jebuenga

This is a configuration related to the CommonsChunkPlugin.

However, since I don't experience it and I don't have any special settings it might be related to the loader that you choose to implement.

I don't know the version you are using, so I will suggest you use the async-require loader:

  { 
              loader: 'ng-router-loader',
              options: {
                loader: 'async-require',
                genDir: 'compiled',
              }
            }

You can also use the async-import which uses the new import() syntax, but this requires the newest version and making the loader run after the ts loader.

See more here: https://shlomiassaf.github.io/ng-router-loader/interfaces/routerloaderoptions.html