Speed issues

[olmobrutall]

Hi @jbrantly and company,

I've been struggling recently improving the build time of a mid-big application using typescript + react + webpack.

This are my main dependencies:

module.exports = {
    entry: {
        //main: [ "./Scripts/Main.tsx" ],
        "react": ["react", "react-bootstrap", "react-router", "react-widgets", "react-router-bootstrap", "moment", "numbro"],
        "codemirror": ["codemirror"],
        "d3": ["d3"],
    },
    ....
}

1. With main commented-out webpack takes only 3.9s to compile the dependencies.
2. Running tsc --outFile takes 6s to compile and bundle my code.
3. So I was expecting ts-loader and ts-loader to take about 10s.

Unfortunately It takes between 30s and 40s, 3 or 4 times slower than expected.

I've tried different possibilities,

• like using externals and noParse-> no important changes
• stop using CommonsChunkPlugin-> no important changes.
• using new webpack.optimize.LimitChunkCountPlugin({maxChunks: 15}) -> about 8% slower.
• removing all the async requires and make one big bundle, without code splitting -> about 10% faster.
• using awesome-typescript-loader instead of ts-loader -> about 10% faster.
• finally using 'ts-loader` with transpileOnly -> about 80% faster now it takes some reasonable * 12s*

But of course this is cheating since ts-loader is not doing the same work than tsc was doing.

For now I will settle on this solution, since I'm compiling TS with noEmit on VisualStudio anyway (I prefer to get the errors there, so I can double-click on them), but I'm curious why webpack is fast, typescript is fast, but webpack + typescript is four times slower :S

I repeated all the measures twice

[andriictkn]

@olmobrutall Do you try to use includes for ts-loader?
{ test: /\.ts$/, loader: 'ts', include: tsSrcPath }

[olmobrutall]

Hi @AndreyUtka,

I'm not aware of the effect of inclue in a loader configuration. What it does?

[donato]

@olmobrutall - I believe that include will create a whitelist for the compiler of directories/files to load and compile.

By using it, you prevent it from indexing other things which may slow you down, like a node_modules, docs, assets, anything else that's in the folder that isn't typescript.

[TheLarkInn]

@olmobrutall creating definition files takes some time also. Do you have definitions: false set to benchmark this as well.

[olmobrutall]

Right now I'm using transpile only, and compiling only in visual studio. Still it takes 20-25 seconds, mainly in the optimize stage. I will check with definitions: false this evening

[johnnyreilly]

Do you use watch mode? I find that the initial spin up can be quite slow but after that it's pretty much instantaneous. If you're interested I can share a setup that allows you to use VS as your editor but with watch mode running. I've been using it for over 6 months and it's pretty solid.

[johnnyreilly]

Oh and if you have your build set to "release" in vs it doesn't do watch but does the full compilation with minification etc

[olmobrutall]

Yes, I have watch mode. Initial time is like 30s and then 20-25s every change...

This is my setup: https://github.com/signumsoftware/southwind/tree/React/Southwind.React

The application has like 200-300 ts files

[johnnyreilly]

Nice setup. My approach exports es6 and uses babel-loader for transpilation. It also only uses WebPack for TypeScript/ JavaScript. Here's an example with Angular: https://github.com/johnnyreilly/proverb-angular

I've also used it with React : https://github.com/Microsoft/TypeScriptSamples/tree/master/react-flux-babel-karma (this lacks the Visual Studio hooks of the Angular example)

It looks like you're splitting out your vendor scripts which should help. Hope some of that is useful to you..

Could be worth looking at how my WebPack watch is set up:
https://github.com/johnnyreilly/proverb-angular/blob/master/gulp/webpack.js

And also comparing with my WebPack.config.js:

https://github.com/johnnyreilly/proverb-angular/blob/master/webpack.config.js

[olmobrutall]

Do you think that traps ailing ES6 to ES5 using Babel will make a big difference? Even if TS is configured for transpiling only (no type checking in webpack)

[olmobrutall]

I finally fixed the problem using dll plugin.

Thanks for your time!

[saskodh]

@olmobrutall, can you please elaborate more on how you fixed the problem and your current setup. I'm also looking for ways to speed up my build. Thanks!

[olmobrutall]

You have a working example here: https://github.com/signumsoftware/southwind/tree/master/Southwind.React

And this is the commit where i activated it: signumsoftware/southwind@99d4697

And this is the commit that updated to webpack 2 (maybe also interesting):
signumsoftware/southwind@50e73f0

[zwwtj2014]

hi, @olmobrutall , in your webpack.cpnfig.js, devtool is closed, do you have tried to measure if you use devtool for sourcemap?

when I use ts-loader + devtool='source-map', build will take 100s and rebuild will take 10s+

And dll plugin is not for me!