Using webpack magic comments in Angular

webpack-magic-comments.ts

// https://webpack.js.org/api/module-methods/#magic-comments
// https://webpack.js.org/guides/code-splitting/#prefetchingpreloading-modules

// Multiple pssible targets
import(
    /* webpackInclude: /\.json$/ */
    /* webpackExclude: /\.skip-import\.json$/ */
    /* webpackPrefetch: true */
    `./locale/${language}`
);

// Single target
import(
    /* webpackChunkName: "my-chunk-name" */
    /* webpackMode: "lazy" */
    /* webpackExports: ["default", "foo"] */
    /* webpackPreload: true */
    'some-module'
);


/**
 
webpackChunkName: A name for the new chunk. Since webpack 2.6.0, the placeholders [index] and [request] are 
supported within the given string to an incremented number or the actual resolved filename respectively. Adding 
this comment will cause our separate chunk to be named [my-chunk-name].js instead of [id].js.

webpackMode: Since webpack 2.6.0, different modes for resolving dynamic imports can be specified. 
The following options are supported:

'lazy' (default): Generates a lazy-loadable chunk for each import()ed module.
'lazy-once': Generates a single lazy-loadable chunk that can satisfy all calls to import(). The chunk will 
be fetched on the first call to import(), and subsequent calls to import() will use the same network response. Note 
that this only makes sense in the case of a partially dynamic statement, e.g. import(`./locales/${language}.json`), 
where multiple module paths that can potentially be requested.

'eager': Generates no extra chunk. All modules are included in the current chunk and no additional network requests 
are made. A Promise is still returned but is already resolved. In contrast to a static import, the module isn't executed 
until the call to import() is made.

'weak': Tries to load the module if the module function has already been loaded in some other way (e.g. another chunk 
imported it or a script containing the module was loaded). A Promise is still returned, but only successfully resolves 
if the chunks are already on the client. If the module is not available, the Promise is rejected. A network request 
will never be performed. This is useful for universal rendering when required chunks are always manually served in 
initial requests (embedded within the page), but not in cases where app navigation will trigger an import not 
initially served.

webpackPrefetch: Tells the browser that the resource is probably needed for some navigation in the future. Check out 
the guide for more information on how webpackPrefetch works.

webpackPreload: Tells the browser that the resource might be needed during the current navigation. Check out the 
guide for more information on how webpackPreload works.

 */

/*

Prefetch:

Hint to the browser that a resource might be needed. You will go wrong if you have too many of them.

Resource is likely to be used for future navigations or actions (If it one click away)

Prefetch will only put it in the browser cache, there is no parsing, no execution

*/

/*

  Preload:

  if you do preload wrong, you hurt your performance

  Declarative fetch
  - I want a resource but I don't want to block the load event.

  Resource is needed for the current page
  - scripts, fonts, important images

  Control priority with "as" resource type.

*/