perf(angular): flat ng modules (#17007)

fixes #17001
2019-01-08 21:33:30 +01:00 · 2019-01-08 21:33:30 +01:00 · 0b84e27c61
parent 76e9e02c28
commit 0b84e27c61
8 changed files with 144 additions and 106 deletions
--- a/.gitignore
+++ b/.gitignore
@ -54,4 +54,5 @@ demos/src/**/*.css.shim.ts
 angular/css/
 core/css/
 core/loader/
-.stencil/
+.stencil/
+angular/build/
--- 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",
--- 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) => {
--- a/angular/scripts/rollup.config.legacy.js
+++ 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 };
--- 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 {
--- 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
--- 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"]
--- a/angular/tsconfig.legacy.json
+++ b/angular/tsconfig.legacy.json
@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "target": "es5",
+    "declarationDir": "build/es5",
+    "outDir": "build/es5"
+  }
+}