From other side, webpack bundler has a feature called which 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, 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.

    Let’s see an 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.

    2.     "compilerOptions": {
    3.         "target": "es5",                          
    4.         "module": "esnext",                     
    5.         "lib": [
    6.             "dom",
    7.             "es5",
    8.             "scripthost",
    9.         ],                                        
    10.         "jsx": "react",                           
    11.         "declaration": false,                     
    12.         "sourceMap": true,                        
    13.         "outDir": "./dist/js",                    
    14.         "strict": true,                           
    15.         "moduleResolution": "node",               
    17.         ],                                        
    18.         "types": [
    19.             "node",
    20.             "react",
    21.             "react-dom"
    22.         ]                                       
    24. }

    Important notes:

    • For further information read this article: .

    You can see full example here.