Overview
Two days ago (27/06/2017), was released TypeScript 2.4.0. Really good news to see that now dynamic import expressions are supported!.
Dynamic import expressions are a new feature and part of ECMAScript that allows users to asynchronously request a module at any arbitrary point in your program. TC39 JavaScript committee has it’s own proposal which is in stage 3, and it’s called import() proposal for JavaScript.
From other side, webpack bundler has a feature called Code Splitting – Async:
Code Splitting – Async allows you to split your bundle into chunks which can be downloaded asynchronously at a later time. For instance, this allows to serve a minimal bootstrap bundle first and to asynchronously load additional features later.
At first glance, I did a strict relationship between these two features. I mean, it’s natural to think (if we are using webpack in our dev workflow) that by using TypeScript 2.4 dynamic import expressions, will automatically produce bundle chunks and automatically code-split you JS final bundle. BUT, that is not as easy as it seems, because it depends on the tsconfig.json configuration we are working with.
The thing is that webpack code splitting supports two similar techniques to achieve this goal: using import() (preferred, ECMAScript proposal) and require.ensure() (legacy, webpack specific). And what that means is the expected TypeScript output is leave the import() statement as it is instead of transpile it to anything else.
Let’s see and example to figure out how to configure webpack + TypeScript 2.4.
In the following code I want to lazy load the library moment but I am interested on code splitting as well, which means, having moment library in a separate chunk of JS (javascript file) and that will be loaded only when required.