Repository navigation
ts-loader's default config makes Webpack extremely slow in larger projects #91
Description
The nature of ts-loader makes it slower as the project's size increases.
https://github.com/TypeStrong/ts-loader#faster-builds
There are 2 options to make it fast:
- Use a separate process for typechecking, following
ts-loader's docs in the link above:
var ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
[ ... ]
module: {
rules: [{
test: /\.ts$/,
loaders: [{
loader: 'ts-loader',
options: {
transpileOnly: true
}
}, 'angular2-template-loader']
},
[ ... ].
plugins: [
new ForkTsCheckerWebpackPlugin(),
[ ... ]
- Use
awesome-typescript-loader:
[ ... ]
module: {
rules: [{
test: /\.ts$/,
loaders: ['awesome-typescript-loader', 'angular2-template-loader']
},
[ ... ]
Any inputs on if these changes breaks anything?
Activity
neilbo commentedon Jun 4, 2018
Hey @ludvon The second method I get: when I try and run
npm run testneilbo commentedon Jun 4, 2018
Hey @ludvon the first option I got working, it has better reporting on how long it took to compile, doesn't make it run faster though:
npm install --save-dev fork-ts-checker-webpack-pluginvilanz commentedon Jun 5, 2018
@neilbo About the second method, it seems that
awesome-typescript-loader@3.5.0is the correct version fortypescript@2.4.2neilbo commentedon Jun 8, 2018
@ludvon you are a legend!
I ended up doing
npm i awesome-typescript-loader@3.5.0 --saved-devIt went from 14-15sec to compile to 1-2sec! I've got ~ 450 unit tests
Cheers!
distante commentedon Oct 6, 2018
Just to add that 3.5.0 is the correct version for typescript 2.x.x . I was not sure about this and maybe other person has the same doubt.
(4.0.0 works with typescript > 2.7 )
distante commentedon Oct 6, 2018
After installing
awesome-typescript-loader@3.5.0the first time I callnpm run testall work as expected but if I make a change into anspec.tsfile Karma crashes with this message:The problem is that
awesome-typescript-loader@3.5.0can not work with Webpack 4.x, so I downgraded Webpack to 3.10 and it works.I can not say if it is faster because I am right now in my crappy old laptop.
Edit: A quick Warning.
Using awesome-typescript-loader will break the detail page of your coverage tests.
v1bh0r commentedon Oct 29, 2018
Updated Webpack to 4.23.1 and used the option 2. Got the following error:
✖ ｢atl｣: Child process failed to process the request: TypeError: Cannot read property 'Created' of undefined
at onFileCreated (node_modules/awesome-typescript-loader/src/checker/runtime.ts:256:61)
at updateFile (node_modules/awesome-typescript-loader/src/checker/runtime.ts:391:4)
at processEmit (node_modules/awesome-typescript-loader/src/checker/runtime.ts:457:3)
at node_modules/awesome-typescript-loader/src/checker/runtime.ts:610:6
at Object.send (node_modules/awesome-typescript-loader/src/checker/runtime.ts:49:6)
at Checker.req (node_modules/awesome-typescript-loader/src/checker/checker.ts:100:15)
at Checker.emitFile (node_modules/awesome-typescript-loader/src/checker/checker.ts:105:15)
at transform (node_modules/awesome-typescript-loader/src/index.ts:130:26)
at transformationFunction (node_modules/awesome-typescript-loader/src/index.ts:72:40)
at compiler (node_modules/awesome-typescript-loader/src/index.ts:83:21)
at Object.loader (node_modules/awesome-typescript-loader/src/index.ts:14:12)
at LOADER_EXECUTION (node_modules/loader-runner/lib/LoaderRunner.js:119:14)
at runSyncOrAsync (node_modules/loader-runner/lib/LoaderRunner.js:120:4)
at iterateNormalLoaders (node_modules/loader-runner/lib/LoaderRunner.js:229:2)
at iterateNormalLoaders (node_modules/loader-runner/lib/LoaderRunner.js:218:10)
Update: Upgrading typescript to 3.1.3 fixed it but the compilation is still slow. Here are my current dependencies:
Update 2: Followed @distante 's suggestions and method 2 fixed the performance issue
Here are my current dependencies: