From 0b84e27c6125bd59004c1fac1881af3df399d259 Mon Sep 17 00:00:00 2001 From: Manu MA Date: Tue, 8 Jan 2019 21:33:30 +0100 Subject: [PATCH] perf(angular): flat ng modules (#17007) fixes #17001 --- .gitignore | 3 +- angular/package.json | 13 +- angular/scripts/rollup.config.js | 4 +- angular/scripts/rollup.config.legacy.js | 9 ++ angular/src/ionic-module.ts | 196 +++++++++++++----------- angular/test/test-app/scripts/sync.sh | 2 + angular/tsconfig.json | 15 +- angular/tsconfig.legacy.json | 8 + 8 files changed, 144 insertions(+), 106 deletions(-) create mode 100644 angular/scripts/rollup.config.legacy.js create mode 100644 angular/tsconfig.legacy.json diff --git a/.gitignore b/.gitignore index 7c80776152..768e7adfdf 100644 --- a/.gitignore +++ b/.gitignore @@ -54,4 +54,5 @@ demos/src/**/*.css.shim.ts angular/css/ core/css/ core/loader/ -.stencil/ \ No newline at end of file +.stencil/ +angular/build/ diff --git a/angular/package.json b/angular/package.json index af531e2da5..652ecd4f40 100644 --- a/angular/package.json +++ b/angular/package.json @@ -20,13 +20,13 @@ "url": "https://github.com/ionic-team/ionic.git" }, "scripts": { - "build": "npm run clean && npm run build.core && npm run build.ng && npm run build.fesm && npm run clean-generated", - "build.dev": "npm run clean && npm run build.core.dev && npm run build.ng && npm run clean-generated", + "build": "npm run clean && npm run build.core && npm run build.ng && npm run clean-generated", "build.core": "node scripts/build-core.js", - "build.core.dev": "node scripts/build-core.js --dev", "build.fesm": "rollup --config ./scripts/rollup.config.js", "build.link": "npm run build && node scripts/link-copy.js", - "build.ng": "./node_modules/.bin/ngc", + "build.ng": "npm run build.es2015 && npm run build.es5", + "build.es2015": "ngc -p tsconfig.json && rollup --config ./scripts/rollup.config.js", + "build.es5": "ngc -p tsconfig.legacy.json && rollup --config ./scripts/rollup.config.legacy.js", "clean": "node scripts/clean.js", "clean-generated": "node ./scripts/clean-generated.js", "lint": "npm run lint.ts", @@ -38,9 +38,7 @@ "validate": "npm i && npm run lint && npm run test && npm run build" }, "module": "dist/fesm5.js", - "main": "dist/fesm5.js", - "types": "dist/index.d.ts", - "sideEffects": false, + "types": "dist/core.d.ts", "files": [ "dist/", "css/" @@ -80,6 +78,7 @@ "rollup": "^1.0.2", "rollup-plugin-node-resolve": "^4.0.0", "rxjs": "^6.2.0", + "tsickle": "^0.34.0", "tslint": "^5.10.0", "tslint-ionic-rules": "0.0.21", "typescript": "3.1.6", diff --git a/angular/scripts/rollup.config.js b/angular/scripts/rollup.config.js index 30e557b439..5a27d6fbcf 100644 --- a/angular/scripts/rollup.config.js +++ b/angular/scripts/rollup.config.js @@ -1,9 +1,9 @@ import resolve from 'rollup-plugin-node-resolve'; export default { - input: 'dist/index.js', + input: 'build/es2015/core.js', output: { - file: 'dist/fesm5.js', + file: 'dist/fesm2015.js', format: 'es' }, external: (id) => { diff --git a/angular/scripts/rollup.config.legacy.js b/angular/scripts/rollup.config.legacy.js new file mode 100644 index 0000000000..5fbe12a1b4 --- /dev/null +++ b/angular/scripts/rollup.config.legacy.js @@ -0,0 +1,9 @@ +import config from './rollup.config'; + +const newConfig = { + ...config, + input: 'build/es5/core.js', +}; +newConfig.output.file = 'dist/fesm5.js'; + +export { newConfig as default }; diff --git a/angular/src/ionic-module.ts b/angular/src/ionic-module.ts index 579a11a2d2..73a7782579 100644 --- a/angular/src/ionic-module.ts +++ b/angular/src/ionic-module.ts @@ -3,112 +3,128 @@ import { APP_INITIALIZER, ModuleWithProviders, NgModule } from '@angular/core'; import { IonicConfig } from '@ionic/core'; import { appInitialize } from './app-initialize'; -import * as d from './directives'; -import * as p from './providers'; +import { BooleanValueAccessor } from './directives/control-value-accessors/boolean-value-accessor'; +import { NumericValueAccessor } from './directives/control-value-accessors/numeric-value-accesssor'; +import { RadioValueAccessor } from './directives/control-value-accessors/radio-value-accessor'; +import { SelectValueAccessor } from './directives/control-value-accessors/select-value-accessor'; +import { TextValueAccessor } from './directives/control-value-accessors/text-value-accessor'; +import { IonBackButtonDelegate } from './directives/navigation/ion-back-button'; +import { IonRouterOutlet } from './directives/navigation/ion-router-outlet'; +import { IonTabs } from './directives/navigation/ion-tabs'; +import { NavDelegate } from './directives/navigation/nav-delegate'; +import { RouterLinkDelegate } from './directives/navigation/router-link-delegate'; +import { IonApp, IonAvatar, IonBackButton, IonBackdrop, IonBadge, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCheckbox, IonChip, IonCol, IonContent, IonDatetime, IonFab, IonFabButton, IonFabList, IonFooter, IonGrid, IonHeader, IonIcon, IonImg, IonInfiniteScroll, IonInfiniteScrollContent, IonInput, IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList, IonListHeader, IonMenu, IonMenuButton, IonMenuToggle, IonNav, IonNavPop, IonNavPush, IonNavSetRoot, IonNote, IonProgressBar, IonRadio, IonRadioGroup, IonRange, IonRefresher, IonRefresherContent, IonReorder, IonReorderGroup, IonRippleEffect, IonRow, IonSearchbar, IonSegment, IonSegmentButton, IonSelect, IonSelectOption, IonSkeletonText, IonSlide, IonSlides, IonSpinner, IonSplitPane, IonTabBar, IonTabButton, IonText, IonTextarea, IonThumbnail, IonTitle, IonToggle, IonToolbar } from './directives/proxies'; +import { VirtualFooter } from './directives/virtual-scroll/virtual-footer'; +import { VirtualHeader } from './directives/virtual-scroll/virtual-header'; +import { VirtualItem } from './directives/virtual-scroll/virtual-item'; +import { IonVirtualScroll } from './directives/virtual-scroll/virtual-scroll'; +import { AngularDelegate } from './providers/angular-delegate'; import { ConfigToken } from './providers/config'; +import { ModalController } from './providers/modal-controller'; +import { PopoverController } from './providers/popover-controller'; const DECLARATIONS = [ // proxies - d.IonApp, - d.IonAvatar, - d.IonBackButton, - d.IonBackdrop, - d.IonBadge, - d.IonButton, - d.IonButtons, - d.IonCard, - d.IonCardContent, - d.IonCardHeader, - d.IonCardSubtitle, - d.IonCardTitle, - d.IonCheckbox, - d.IonChip, - d.IonCol, - d.IonContent, - d.IonDatetime, - d.IonFab, - d.IonFabButton, - d.IonFabList, - d.IonFooter, - d.IonGrid, - d.IonHeader, - d.IonIcon, - d.IonImg, - d.IonInfiniteScroll, - d.IonInfiniteScrollContent, - d.IonInput, - d.IonItem, - d.IonItemDivider, - d.IonItemGroup, - d.IonItemOption, - d.IonItemOptions, - d.IonItemSliding, - d.IonLabel, - d.IonList, - d.IonListHeader, - d.IonMenu, - d.IonMenuButton, - d.IonMenuToggle, - d.IonNav, - d.IonNavPop, - d.IonNavPush, - d.IonNavSetRoot, - d.IonNote, - d.IonProgressBar, - d.IonRadio, - d.IonRadioGroup, - d.IonRange, - d.IonRefresher, - d.IonRefresherContent, - d.IonReorder, - d.IonReorderGroup, - d.IonRippleEffect, - d.IonRow, - d.IonSearchbar, - d.IonSegment, - d.IonSegmentButton, - d.IonSelect, - d.IonSelectOption, - d.IonSkeletonText, - d.IonSlide, - d.IonSlides, - d.IonSpinner, - d.IonSplitPane, - d.IonTabBar, - d.IonTabButton, - d.IonText, - d.IonTextarea, - d.IonThumbnail, - d.IonToggle, - d.IonToolbar, - d.IonTitle, + IonApp, + IonAvatar, + IonBackButton, + IonBackdrop, + IonBadge, + IonButton, + IonButtons, + IonCard, + IonCardContent, + IonCardHeader, + IonCardSubtitle, + IonCardTitle, + IonCheckbox, + IonChip, + IonCol, + IonContent, + IonDatetime, + IonFab, + IonFabButton, + IonFabList, + IonFooter, + IonGrid, + IonHeader, + IonIcon, + IonImg, + IonInfiniteScroll, + IonInfiniteScrollContent, + IonInput, + IonItem, + IonItemDivider, + IonItemGroup, + IonItemOption, + IonItemOptions, + IonItemSliding, + IonLabel, + IonList, + IonListHeader, + IonMenu, + IonMenuButton, + IonMenuToggle, + IonNav, + IonNavPop, + IonNavPush, + IonNavSetRoot, + IonNote, + IonProgressBar, + IonRadio, + IonRadioGroup, + IonRange, + IonRefresher, + IonRefresherContent, + IonReorder, + IonReorderGroup, + IonRippleEffect, + IonRow, + IonSearchbar, + IonSegment, + IonSegmentButton, + IonSelect, + IonSelectOption, + IonSkeletonText, + IonSlide, + IonSlides, + IonSpinner, + IonSplitPane, + IonTabBar, + IonTabButton, + IonText, + IonTextarea, + IonThumbnail, + IonToggle, + IonToolbar, + IonTitle, - d.IonTabs, + IonTabs, // ngModel accessors - d.BooleanValueAccessor, - d.NumericValueAccessor, - d.RadioValueAccessor, - d.SelectValueAccessor, - d.TextValueAccessor, + BooleanValueAccessor, + NumericValueAccessor, + RadioValueAccessor, + SelectValueAccessor, + TextValueAccessor, // navigation - d.IonRouterOutlet, - d.IonBackButtonDelegate, - d.NavDelegate, - d.RouterLinkDelegate, + IonRouterOutlet, + IonBackButtonDelegate, + NavDelegate, + RouterLinkDelegate, // virtual scroll - d.VirtualFooter, - d.VirtualHeader, - d.VirtualItem, - d.IonVirtualScroll + VirtualFooter, + VirtualHeader, + VirtualItem, + IonVirtualScroll ]; @NgModule({ declarations: DECLARATIONS, exports: DECLARATIONS, - providers: [p.AngularDelegate, p.ModalController, p.PopoverController], + providers: [AngularDelegate, ModalController, PopoverController], imports: [CommonModule] }) export class IonicModule { diff --git a/angular/test/test-app/scripts/sync.sh b/angular/test/test-app/scripts/sync.sh index 404cf83ad1..67b907e8c5 100644 --- a/angular/test/test-app/scripts/sync.sh +++ b/angular/test/test-app/scripts/sync.sh @@ -1,10 +1,12 @@ # Copy angular dist rm -rf node_modules/@ionic/angular/dist cp -a ../../dist node_modules/@ionic/angular/dist +cp -a ../../package.json node_modules/@ionic/angular/package.json # Copy core dist rm -rf node_modules/@ionic/core/dist cp -a ../../../core/dist node_modules/@ionic/core/dist +cp -a ../../../core/package.json node_modules/@ionic/core/package.json # Copy ionicons rm -rf node_modules/ionicons diff --git a/angular/tsconfig.json b/angular/tsconfig.json index 5a396a7b67..fba3c2b2ed 100644 --- a/angular/tsconfig.json +++ b/angular/tsconfig.json @@ -1,7 +1,11 @@ { "angularCompilerOptions": { - "fullTemplateTypeCheck": true, - "strictMetadataEmit" : true + "annotateForClosureCompiler": true, + "strictMetadataEmit" : true, + "flatModuleOutFile": "core.js", + "flatModuleId": "@ionic/angular", + "skipTemplateCodegen": true, + "fullTemplateTypeCheck": false }, "compilerOptions": { "alwaysStrict": true, @@ -9,10 +13,9 @@ "allowSyntheticDefaultImports": true, "allowUnreachableCode": false, "declaration": true, + "declarationDir": "dist", "experimentalDecorators": true, "forceConsistentCasingInFileNames": true, - "jsx": "react", - "jsxFactory": "h", "lib": ["dom", "es2017"], "module": "es2015", "moduleResolution": "node", @@ -20,13 +23,13 @@ "noImplicitReturns": true, "noUnusedLocals": true, "noUnusedParameters": true, - "outDir": "dist", + "outDir": "build/es2015", "pretty": true, "removeComments": false, "importHelpers": true, "rootDir": "src", "strictPropertyInitialization": false, - "target": "es5" + "target": "es2015" }, "exclude": ["node_modules", "src/schematics"], "files": ["src/index.ts"] diff --git a/angular/tsconfig.legacy.json b/angular/tsconfig.legacy.json new file mode 100644 index 0000000000..90dc047c3a --- /dev/null +++ b/angular/tsconfig.legacy.json @@ -0,0 +1,8 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "target": "es5", + "declarationDir": "build/es5", + "outDir": "build/es5" + } +}