awesome-typescript-loader
awesome-typescript-loader copied to clipboard
s-panferov
TS 2.7.1 -> 2.8.1 and compilation is twice as slow
That is all I can say. Twice as slow. Specifically module building progress is laggy. Not as fast as smooth as previously... from 0/1800 to 1800/1800 of my modules. Others have got to notice as well. It is very noticable. All I did was npm upgrade typescript (from 2.7.1 to 2.8.1). I reverted back to TS 2.7.1 and it was fast again.
Other versions: Webpack 4.5 (also tried with my last version 4.1.1, no difference) ATL 5.0.0-1 (i have a fork where I changed 1 line so that transformers get access to the program object, nothing more..)
my config
const webpack = require('webpack');
const path = require('path')
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const _ = require('lodash');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const autoprefixer = require('autoprefixer');
const keysTransformer = require('ts-transformer-keys/transformer').default;
var HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
const extractSass = new ExtractTextPlugin({
filename: `styles.[chunkhash].css`,
// disable: process.env.NODE_ENV === "development"
});
const pre = "@neoncom/";
const workers = {
"editor.worker": pre + 'monaco-editor/esm/vs/editor/editor.worker',
"json.worker": pre + 'monaco-editor/esm/vs/language/json/json.worker',
"css.worker": pre + 'monaco-editor/esm/vs/language/css/css.worker',
"html.worker": pre + 'monaco-editor/esm/vs/language/html/html.worker',
"ts.worker": pre + 'monaco-editor/esm/vs/language/typescript/ts.worker'
}
const workerNames = Object.keys(workers);
module.exports = (env, options) => {
const mode = options.mode;
const isProduction = mode === 'production';
const outDir = isProduction ? 'build/release' : 'build/debug';
return {
stats: 'minimal',
performance: {
hints: false
},
entry: {
"app": "./src/main.tsx",
...workers
},
output: {
filename: "[name].bundle.js", // todo chunkhash rausgenommen weil in main.tsx sonst ich die chunkhashes für die worker dateien nicht weiß
path: `${__dirname}/${outDir}`
},
node: {
fs: 'empty' // because else bundle error in sourcemap npm module
},
devtool: isProduction ? undefined : "source-map",
resolve: {
extensions: [".ts", ".tsx", ".js", ".json"],
alias: {
'duk_debug': path.resolve(__dirname, 'src/lib/duk_debug/duk_debug.js'),
"@components": path.resolve(__dirname, "src/components"),
"@lib": path.resolve(__dirname, "src/lib"),
"@common": path.resolve(__dirname, "src/common"),
"@redux": path.resolve(__dirname, "src/redux"),
"@services": path.resolve(__dirname, "src/services"),
"@translations": path.resolve(__dirname, "src/translations"),
"@serverApi": path.resolve(__dirname, "src/server-api")
}
},
module: {
rules: [
{
test: require.resolve('jquery.hotkeys'),
use: 'imports-loader?jQuery=jquery'
}, {
test: require.resolve('golden-layout/dist/goldenlayout'),
use: 'imports-loader?ReactDOM=react-dom&React=react'
},
{
test: /\.tsx?$/,
loader: "@neoncom/awesome-typescript-loader",
options: {
configFileName: 'src/tsconfig.json',
getCustomTransformers: () => {
return {
before: [p => keysTransformer(p)]
};
}
}
},
{
test: /\.(css|sass|scss)$/,
use: extractSass.extract({
use: [
{
loader: 'css-loader',
options: {
minimize: isProduction
}
},
{
loader: "postcss-loader",
options: {
plugins: () => [autoprefixer({
browsers: [
'last 3 version',
'ie >= 10'
]
})]
}
},
{ loader: "sass-loader" }
],
fallback: "style-loader"
})
},
{
test: /node_modules[\/\\]font-awesome/,
loader: 'file-loader',
options: {
emitFile: false
}
},
{
test: { not: [{ test: /node_modules[\/\\]font-awesome/ }] },
rules: [
{
test: { or: [/icomoon\.svg$/, /fonts[\/\\]seti\.svg$/] },
rules: [
{ loader: 'file-loader?mimetype=image/svg+xml' },
]
}, {
test: { not: [/icomoon\.svg$/, /fonts[\/\\]seti\.svg$/] },
rules: [
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: {
loader: 'svg-url-loader',
options: {}
}
},
]
},
{
test: /\.(png|jpg|gif)$/,
loader: 'url-loader'
},
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?mimetype=application/font-woff" },
{ test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?mimetype=application/font-woff" },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?mimetype=application/octet-stream" },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader" },
]
},
]
},
plugins: [
new webpack.ProvidePlugin({
TextDecoder: ['text-encoding', 'TextDecoder'], // for MS Edge
TextEncoder: ['text-encoding', 'TextEncoder'], // for MS Edge
"window.$": "jquery" // just for golden-layout/dist/goldenlayout
}),
new CleanWebpackPlugin(outDir),
extractSass,
new HtmlWebpackPlugin({
title: 'neonious one',
filename: 'index.html',
minify: isProduction ? {
collapseWhitespace: true,
collapseInlineTagWhitespace: true,
removeComments: true,
removeRedundantAttributes: true
} : false,
template: 'index_template.html',
excludeChunks: workerNames
}),
new webpack.IgnorePlugin(/^((fs)|(path)|(os)|(crypto)|(source-map-support))$/, /vs[\\\/]language[\\\/]typescript[\\\/]lib/)
]
}
};
I encountered the same problem and I was slow to compile after upgrading to webpack4.5.
I'm having the same issue here. I did a middle test returning to typescript 2.7 and I can confirm is twice slow. Either Webpack 3 or 4.
// tsc 2.9.2
[at-loader] Ok, 3.707 sec.
Hash: c016501d5bb524214ed6
Version: webpack 3.10.0
Time: 171201ms
// tsc 2.7.1
[at-loader] Ok, 1.063 sec.
Hash: 4014beaec9435be8dc88
Version: webpack 3.10.0
Time: 73269ms
// tsc 2.9.2
[at-loader] Ok, 5.631 sec.
Hash: c016501d5bb524214ed6
Version: webpack 3.10.0
Time: 196935ms
As a workaround I'm using
[email protected] // webpack 3
[email protected] // webpack 4
and I'm getting good build time numbers again.
first test
Hash: 732e059e3d464f707d1e
Version: webpack 3.10.0
Time: 73913ms
second test
Hash: 732e059e3d464f707d1e
Version: webpack 3.10.0
Time: 68375ms
Any update on this? This issue is reproducible on both TS 2.8.3 as well as 2.9.2.
Using: webpack 4.16.1 awesome-typescript-loader 5.2.0 hard-source-webpack-plugin 0.11.1 all recommended performance options are configured as well
Reverting back to TS 2.7.2 fixes the issue, and build times are really fast (for a project with around 2200 modules), however it would be nice to get an update on the status of this.
I'm seeing the same issue using webpack 4.16.0, atl 5.2, and typescript 2.8.3. Any update would be great!
So I checked out ProcessMonitor what Node was doing when building to try to find out what might be the issue. One reoccurring pattern that caught my attention was this:
It seems like the process is querying information about types (node_modules/@types/**) pretty much all the time. Removing @types decreased the time from 364sec -> 90sec. Not sure it it's an actual problem, or just a symptom.
Profile from my run:
Statistical profiling result from isolate-0000019E2A56AFF0-v8.log, (132427 ticks, 5131 unaccounted, 0 excluded).
[Shared libraries]:
ticks total nonlib name
41412 31.3% C:\Program Files\nodejs\node.exe
3620 2.7% C:\WINDOWS\SYSTEM32\ntdll.dll
46 0.0% C:\WINDOWS\System32\KERNEL32.DLL
28 0.0% C:\WINDOWS\System32\KERNELBASE.dll
[JavaScript]:
ticks total nonlib name
30134 22.8% 34.5% LoadIC: A load IC from the snapshot
3949 3.0% 4.5% Builtin: CallFunction_ReceiverIsNullOrUndefined
3517 2.7% 4.0% Builtin: FastNewClosure
2573 1.9% 2.9% Builtin: Call_ReceiverIsNullOrUndefined
2264 1.7% 2.6% LoadIC: A load IC from the snapshot {1}
2148 1.6% 2.5% Builtin: MapLookupHashIndex
1274 1.0% 1.5% StoreIC: A store IC from the snapshot
1196 0.9% 1.4% Builtin: KeyedLoadIC_Megamorphic
1112 0.8% 1.3% LazyCompile: *resolveNameHelper C:\Users\me\repo\web-lib-angular1\node_modules\typescript\lib\typescript.js:27626:35
863 0.7% 1.0% Builtin: InterpreterEntryTrampoline
573 0.4% 0.7% Builtin: CallFunction_ReceiverIsAny
510 0.4% 0.6% Builtin: ArgumentsAdaptorTrampoline
487 0.4% 0.6% LazyCompile: *getSymbolLinks C:\Users\me\repo\web-lib-angular1\node_modules\typescript\lib\typescript.js:27465:32
482 0.4% 0.6% Builtin: CompileLazy
466 0.4% 0.5% LazyCompile: *getControlFlowContainer C:\Users\me\repo\web-lib-angular1\node_modules\typescript\lib\typescript.js:39718:41
461 0.3% 0.5% LazyCompile: *set native collection.js:149:4
433 0.3% 0.5% LazyCompile: *getTypeAtFlowNode C:\Users\me\repo\web-lib-angular1\node_modules\typescript\lib\typescript.js:39095:39
427 0.3% 0.5% Builtin: LoadIC_Noninlined
423 0.3% 0.5% KeyedLoadIC: A keyed load IC from the snapshot
406 0.3% 0.5% Builtin: StringEqual
399 0.3% 0.5% LazyCompile: *getNodeLinks C:\Users\me\repo\web-lib-angular1\node_modules\typescript\lib\typescript.js:27471:30
364 0.3% 0.4% Builtin: StrictEqual
336 0.3% 0.4% LazyCompile: *getSymbolOfNode C:\Users\me\repo\web-lib-angular1\node_modules\typescript\lib\typescript.js:28809:33
[C++]:
ticks total nonlib name
[Summary]:
ticks total nonlib name
82190 62.1% 94.1% JavaScript
0 0.0% 0.0% C++
21119 15.9% 24.2% GC
45106 34.1% Shared libraries
5131 3.9% Unaccounted
[C++ entry points]:
ticks cpp total name
[Bottom up (heavy) profile]:
Note: percentage shows a share of a particular caller in the total
amount of its parent calls.
Callers occupying less than 1.0% are not shown.
ticks parent name
Explanation from another thread what LoadIC is: https://groups.google.com/forum/#!topic/v8-users/jdHJkiOG12k
Is this project still being maintained? I have the same issue, but angular7 need typescipt 2.8.x or 3.x.
I managed to improve compile times immensely by specifying the entrypoint in tsconfig.json, eg.
...
},
"exclude": ["node_modules"],
"files": ["app/app.tsx", ""]
}
