how to work with Code Spliting of Webpack 2

[jzlxiaohei]

webpack 2 use import('xx').then() to split code. But use import() in ts is invalid.

any examples to show how to use import() with webpack 2 and ts ?

[dmeenhuis]

I've added the following to my lib.d.ts:

declare var System: any;

And then in my code I can just call:

System.import('./path/to/module').then((c: any) => c.default)

Works for me, combined with react-router.

[jzlxiaohei]

@dmeenhuis
thanks for your answer.
As far as i know, System.import is deprecated in Webpack 2.
see webpack/webpack#3098

[dmeenhuis]

Ah, interesting, I didn't know that. Thanks for the heads-up! Although this seems fine for the moment, since System.import won't be removed before Webpack 3.

[joezimjs]

I'm running into the same issue with Babel. I don't see a plugin to let Babel understand the new import function either. https://www.npmjs.com/package/babel-plugin-dynamic-import-webpack sorta does the trick, but converts it to require.ensure. All we really need is a means of allowing Babel to see import() and leave it alone.

[aboodz]

I had the same problem. We are building Angular 2 application, and I needed to split the app into multiple chucks to reduce the loading time. I tried to to use the new import() syntax; however, it seems that it is considered invalid syntax in typescript (even after install babel-plugin-dynamic-import-webpack). To over come this, I have installed SystemJS to my dev dependecies (using npm intsall --save-dev @types/systemjs). Then loaded the module like this

        System.import('./+layout/layout.module.ts').then(module => module.default)

TS will complain about System being deprecated, just ignore that. Run build and It will successfully split the code into chucks.

[joezimjs]

@aboodz You don't need to install SystemJS to use System.import. Webpack already handles it.

[aboodz]

@joezimjs, I tried to remove SystemJS from dev-dependencies, but it will show a build error as below:

ERROR in [default] /home/abood/git-repo/abwab-portal/src/main/webapp/app/+content/content.module.ts:19:8 
Cannot find name 'System'.

Thinking twice.... you are right we don't need SystemJS, but we need to have a definition for System object, so the compiler doesn't complain. Therefore, installing SystemJS typing is an easy way to provide a definition for System object. Also, I believe creating a definition for System would solve this as well.

[joezimjs]

@aboodz Ah. I didn't realize you were using TS

[yoyo837]

@joezimjs
Here is it.
https://github.com/babel/babel/tree/master/packages/babel-plugin-syntax-dynamic-import
It works fine in es6, not ts. I am looking for an answer to make the TS work fine. Does anyone know something?

[day01]

You can use System.import in TS. Unfortunately webpack typings doesn't contains that part.
But workaround exists:)
You have to import systemjs typings. Then all should work correctly. Of course System is deprecated based on systemjs typings...

[joexzh]

Since typescript@2.4.1 now supports the import() syntax. So I follow the webpack Code Splitting demo. It works well in JS.
But once transformed to TS, The bundle code is all in one, not splitting.

[alexichepura]

It's because typescript itself compiles import() and webpack doesn't get it after ts compilation.
There is a way to pass this step to webpack.
In tsconfig, in "compilerOptions" set
"module": "esnext"
Not sure how stable it though.

[Dante-101]

It doesn't work. I end up with the following error stack for each import. My code compiles and works fine with ts-loader.

ERROR in <file>.tsx
Module build failed: SyntaxError: <file>.tsx: Unexpected token (3:40)
  1 | import * as React from 'react';
> 2 | export const contentScreenLoad = () => import(/* webpackChunkName: "content-screen" */ '../containers/content-screen');
    |                                        ^
    at Parser.pp$5.raise (.../babylon/lib/index.js:4458:13)
    at Parser.pp.unexpected (.../babylon/lib/index.js:1765:8)
    at Parser.pp$3.parseExprAtom (.../babylon/lib/index.js:3631:50)
    at Parser.pp$3.parseExprSubscripts (.../babylon/lib/index.js:3498:19)
    at Parser.pp$3.parseMaybeUnary (.../babylon/lib/index.js:3478:19)
    at Parser.pp$3.parseExprOps (.../babylon/lib/index.js:3408:19)
    at Parser.pp$3.parseMaybeConditional (.../babylon/lib/index.js:3385:19)
    at Parser.pp$3.parseMaybeAssign (.../babylon/lib/index.js:3348:19)
    at Parser.pp$1.parseVar (.../babylon/lib/index.js:2344:24)
    at Parser.pp$1.parseVarStatement (.../babylon/lib/index.js:2173:8)
    at Parser.pp$1.parseStatement (.../babylon/lib/index.js:1865:19)
    at Parser.pp$1.parseExportDeclaration (.../babylon/lib/index.js:2670:15)
    at Parser.pp$1.parseExport (.../babylon/lib/index.js:2658:29)
    at Parser.pp$1.parseStatement (.../babylon/lib/index.js:1888:74)
    at Parser.pp$1.parseBlockBody (.../babylon/lib/index.js:2272:21)
    at Parser.pp$1.parseTopLevel (.../babylon/lib/index.js:1782:8)
    at Parser.parse (.../babylon/lib/index.js:1677:17)
    at parse (.../babylon/lib/index.js:7250:37)
    at File.parse (.../babel-core/lib/transformation/file/index.js:517:15)
    at File.parseCode (.../babel-core/lib/transformation/file/index.js:602:20)
    at .../babel-core/lib/transformation/pipeline.js:49:12
    at File.wrap (.../babel-core/lib/transformation/file/index.js:564:16)
    at Pipeline.transform (.../babel-core/lib/transformation/pipeline.js:47:17)
    at .../awesome-typescript-loader/src/index.ts:151:50

Here are my compiler options:

    "target": "es2017",
    "module": "esnext",
    "moduleResolution": "node"

[thomhos]

Hi guys,

I'm having the same problem, and getting a bit stuck.

I'm using TS 2.4.2 and trying to do codesplitting on a route;

const Home = AsyncComponent(() => {
    return import( /* webpackChunkName: 'home' */ './pages/home')
        .then( module => module.default || module)
})

I've tried just about anything I could find, but my code is compiling and working, but the code is not split up.

I've tried;

compilerOptions: {
    "module": "commonjs" | "esnext"
    "target": "es6" | "es5"
}

Tried both 'babel-plugin-syntax-dynamic-import', 'babel-plugin-dynamic-import-webpack'. Nothing seems to get me closer to actually split up code at the moment.

Anyone here that has a working example so i can check what I'm missing?

Edit: It was late last night, and I missed something stupid lol :)

I still had a module.hot accepting a direct path to an index file which imported the modules I wanted to have lazy loaded. This made sure webpack was still including it in the bundle. So make sure that there are absolutely no other references to the lazy loaded code anywhere else.

I've got it successfully working with System.Import and using "module": "commonjs". And using import() when using "module": "esnext" and with the 'syntax-dynamic-import' plugin from babel.