Angular 4 startup performance

Question

We have Angular 4 project compiled aot and bundled with rollup and without lazy loading. It takes about 3 seconds for scripting during startup. I need to reduce this time. I found examples of Angular 4 app with startup time less then 1 sec: http://www.syntaxsuccess.com/bundling-demo-rollup#/demo/spreadsheet. So I believe it's possible to reduce our startup time. Below trace from our app.

Some function calls are suspicious: build, compileComponent and _compileTemplate. This is aot compilation and still building and compilation at startup. I didn't find any useful information about it. Any suggestion about how could it happened or why it's correct are welcome.

Any suggestions on how to improve startup loading time are welcome as well.

UPD

Below sources tab

tsconfig-rollup.json

{
    "extends": "./tsconfig.json",
    "files": [
        "temp/app/main.ts"
    ],
    "angularCompilerOptions": {
        "genDir": "temp/aot",
        "skipMetadataEmit": true
    }
}

tsconfig.json

{
"compileOnSave": false,
"compilerOptions": {
    "module": "es2015",
    "target": "es5",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noImplicitAny": false,
    "removeComments": true,
    "declaration": false,
    "suppressImplicitAnyIndexErrors": true,
    "allowSyntheticDefaultImports": true,
    "typeRoots": [
        "./node_modules/@types"
    ],
    "lib": [
        "es2015",
        "es2017",
        "dom"
    ]
},
"exclude": [
    "node_modules"
]

}

Are you sure that it is AOT? `_compileTemplate` function is located in `@angular/compiler`. More precisely it is part of `JitCompiler` — yurzui, Jun 08 '17 at 09:17
@yurzui it compiled with ngc by command `node node_modules\\@angular\\compiler-cli\\src\\main.js -p tsconfig-rollup.json --locale=en-US` for win machines and `./node_modules/.bin/ngc -p tsconfig-rollup.json --locale=en-US` for mac. but this functions are really suspicious. I checked for any references to @angular/compiler in code and found only in dependencies section of package.json. — IAfanasov, Jun 08 '17 at 09:45
Seems something is being created by using compiler. `ng://t` — yurzui, Jun 08 '17 at 09:58
Yes, your `angularSPA.js` script contains code from `@angular/compiler` — yurzui, Jun 08 '17 at 10:04
How does your `tsconfig-rollup.json` look like? Do you use `platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);`? Perhaps you use some library that uses `JitCompiler` internally — yurzui, Jun 08 '17 at 10:08
I use ` import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; platformBrowserDynamic().bootstrapModule(MainModule).catch((error) => { alert(error); console.dir(error); });` going to add tsconfig now — IAfanasov, Jun 08 '17 at 10:09
You can take a look at my aot example that is based on angular tutorial https://github.com/alexzuza/angular2-build-examples/tree/master/systemjs-ngc-rollup For production build i use https://github.com/alexzuza/angular2-build-examples/blob/master/systemjs-ngc-rollup/src/main-aot.ts#L9 See also https://angular.io/docs/ts/latest/cookbook/aot-compiler.html — yurzui, Jun 08 '17 at 10:12
You can always check your bundle `"check:aot": "source-map-explorer build-aot/build.js"` — yurzui, Jun 08 '17 at 10:18
@yurzui may you please answer question? want to save solution for feature ramblers and give you credit for it — IAfanasov, Jun 08 '17 at 15:46

Angular 4 startup performance

0 Answers0