Named chunks using System.imports

I’m submitting a feature request

Hi, I am Rahul from Housing.com’s team. We recently upgraded to Webpack 2 and are currently running it in production. With webpack 2 we wanted to use the goodness of System.import for lazy loading chunks based on routes. We use webpack-asset-plugin which gives us a json that looks something like this

{
  "homeView": {
    "js": "/homeView.d4945ffa6d585a8f5033.js",
    "css": "/homeView.d4945ffa6d585a8f5033.css"
  },
  "manifest": {
    "js": "/manifest.aaf45671ff987487168d.js"
  },
  "vendor": {
    "js": "/vendor.142ba3af3944653e15d6.js"
  },
  "app": {
    "js": "/app.65e853eea4296795be89.js",
    "css": "/app.65e853eea4296795be89.css"
  },
  "searchView": {
    "js": "/searchView.73a0c003f8c59322d62b.js",
    "css": "/searchView.73a0c003f8c59322d62b.css"
  }
}

We use this json object to optimize asset delivery for our app, e.g. if you hit home view we would know that the chunk that is going to be requested is homeView and we add the relevant prelaod tag in the head while chunking response from the server e.g.

<head>
...
<link rel="preload" href="<%%- assets[chunkname].js %%>" as="script">
...
</head>

and also use these while defining precache assets for our service worker e.g.

importScripts('sw-toolbox.js');
... 

const precaches = [ "<%%- assets.searchView.js %%>", "<%%- assets.loginView..js %%>", "<%%- assets.projectsDedicatedView.js %%>" ];

toolbox.precache(precaches);

But this was possible because we had named chunks.

But now System.imports only gives numbered chunks, and hence we are not able to take advantage of the previously done optimizations.

   Asset                       Size          Chunks             Chunk Names
0.d2053432333cbde5f133.js     125 kB       0, 45  [emitted]  
2.07c08f0155d1702a389e.js     101 kB       2, 45  [emitted]  
3.c8879adeb6c348a99ac8.js    93.4 kB       3, 45  [emitted]  
4.4d3e066a31a2638607a6.js    62.1 kB       4, 45  [emitted]  
5.9908d935ab7f45adb767.js    54.8 kB       5, 45  [emitted]  
6.fa6875524c3a1c358d8f.js    51.2 kB       6, 45  [emitted]  
7.6d22b802d40e1486f655.js    41.2 kB       7, 45  [emitted]  
8.00ed4761acae0aaa13cf.js    31.1 kB       8, 45  [emitted]  
9.59f31df8803ca92fcb5d.js    25.1 kB       9, 45  [emitted]  
10.73dfc1d733721eb694ca.js    16.5 kB      10, 45  [emitted]  
11.8dd4a211c28c7ba3ff03.js    25.2 kB      11, 45  [emitted]  
12.888503b5b2531d27c6b6.js    12.4 kB      12, 45  [emitted]  
13.4313b137cb92d5e71c98.js    23.2 kB      13, 45  [emitted]  
14.0f06286c5daee4581031.js    8.01 kB      14, 45  [emitted]  
15.5968251aa35a703aae53.js    6.97 kB      15, 45  [emitted]  
16.d59c45c7496a88c5eca7.js    5.18 kB      16, 45  [emitted]  
17.7532d3b4612c89164ff3.js    3.14 kB      17, 45  [emitted]  
18.56e9f78dd30e71343419.js    2.76 kB      18, 45  [emitted]  

It would be great to have namedChunks with System.imports. I don’t have much idea about the details but may be something is possible using

System.module(source, options?)
evaluates the JavaScript code in source to a module (which is delivered asynchronously via a Promise).

System.set(name, module)
is for registering a module (e.g. one you have created via System.module()).

System.define(name, source, options?)
both evaluates the module code in source and registers the result.

source http://exploringjs.com/es6/ch_modules.html

Webpack version:
2.x

Please tell us about your environment:
OSX 10.x / Linux

  • What is the motivation / use case for changing the behavior?
    System.imports provides promise based module loading functionality which will definitely help in lot of optimizations in terms of route based sharding and lazy loading, and having namedChunks with webpack will definitely give more flexibility in terms of applying different asset loading techniques.

Author: Fantashit

1 thought on “Named chunks using System.imports

Comments are closed.