feat(mobile): add prod build step to concatenate scripts

For projects that use the --mobile flag, this will cause all third-party polyfills and the system-loader script to be concatenated into a single file that can be loaded via an async script tag. This is necessary for App Shell to work properly, so that rendering won't be blocked on synchronous script loading. Note: this change still loads app and library files individually. Follow-up work should be done to further improve loading performance.
angular · May 12, 2016 · 51569ce · 51569ce
1 parent cb1270f
commit 51569ce
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 13 deletions.
diff --git a/addon/ng2/blueprints/mobile/files/__path__/system-import.js b/addon/ng2/blueprints/mobile/files/__path__/system-import.js
@@ -0,0 +1,3 @@
+System.import('system-config.js').then(function () {
+  System.import('main');
+}).catch(console.error.bind(console));
diff --git a/addon/ng2/blueprints/ng2/files/__path__/index.html b/addon/ng2/blueprints/ng2/files/__path__/index.html
@@ -33,12 +33,31 @@
 <body>
   <<%= htmlComponentName %>-app>Loading...</<%= htmlComponentName %>-app>
 
-  {{#each scripts.polyfills}}<script src="{{.}}"></script>{{/each}}
+  <% if (isMobile) { %>
+
+    {{#if environment.production}}
+      <script src="/app-concat.js" async></script>
+    {{else}}
+      {{#each scripts.polyfills}}<script src="{{.}}"></script>{{/each}}
+      <script>
+        System.import('system-config.js').then(function () {
+          System.import('main');
+        }).catch(console.error.bind(console));
+      </script>
+    {{/if}}
+
+  <% } else { %>
+
+    {{#each scripts.polyfills}}<script src="{{.}}"></script>{{/each}}
+    <script>
+      System.import('system-config.js').then(function () {
+        System.import('main');
+      }).catch(console.error.bind(console));
+    </script>
+
+  <% } %>
+
+
 
-  <script>
-    System.import('system-config.js').then(function () {
-      System.import('main');
-    }).catch(console.error.bind(console));
-  </script>
 </body>
 </html>
diff --git a/lib/broccoli/angular2-app.js b/lib/broccoli/angular2-app.js
@@ -13,6 +13,8 @@ const Project = require('ember-cli/lib/models/project');
 const HandlebarReplace = require('./broccoli-handlebars');
 const config = require('../../addon/ng2/models/config');
 const loadEnvironment = require('./environment');
+const concat = require('broccoli-concat');
+const uglify = require('broccoli-uglify-js');
 
 class Angular2App extends BroccoliPlugin {
   constructor(project, inputNode, options) {
@@ -30,6 +32,13 @@ class Angular2App extends BroccoliPlugin {
     this._sourceDir = options.sourceDir
                    || (this.ngConfig.defaults && this.ngConfig.defaults.sourceDir)
                    || 'src';
+    this._options.polyfills = this._options.polyfills || [
+      'vendor/es6-shim/es6-shim.js',
+      'vendor/reflect-metadata/Reflect.js',
+      'vendor/systemjs/dist/system.src.js',
+      'vendor/zone.js/dist/zone.js'
+    ];
+
     this._destDir = options.destDir || '';
 
     // By default, add all spec files to the tsCompiler.
@@ -285,12 +294,7 @@ class Angular2App extends BroccoliPlugin {
       config: this.ngConfig,
       environment: loadEnvironment(this.project),
       scripts: {
-        polyfills: this._options.polyfills || [
-          'vendor/es6-shim/es6-shim.js',
-          'vendor/reflect-metadata/Reflect.js',
-          'vendor/systemjs/dist/system.src.js',
-          'vendor/zone.js/dist/zone.js'
-        ]
+        polyfills: this._options.polyfills
       },
       mobile: mobile
     }, {
@@ -411,7 +415,35 @@ class Angular2App extends BroccoliPlugin {
       include: ['**/*.js']
     });
 
-    return BroccoliMergeTrees([nonJsTree, scriptTree, new BundlePlugin([jsTree])], { overwrite: true });
+    var bundleTree = new BundlePlugin([jsTree]);
+
+    if (this.ngConfig.apps[0].mobile) {
+      bundleTree = concat(BroccoliMergeTrees([jsTree, scriptTree, bundleTree], {
+        overwrite: true
+      }), {
+        headerFiles: this._options.polyfills.concat([
+          'system-config.js',
+          'main.js',
+          'app/index.js'
+        ]),
+        inputFiles: [
+          'system-import.js'
+        ],
+        header: ';(function() {',
+        footer: '}());',
+        sourceMapConfig: { enabled: true },
+        allowNone: false,
+        outputFile: '/app-concat.js'
+      });
+
+      bundleTree = uglify(bundleTree, {
+        mangle: false
+      });
+    }
+
+
+
+    return BroccoliMergeTrees([nonJsTree, scriptTree, bundleTree], { overwrite: true });
   }
 }
 

diff --git a/package.json b/package.json
@@ -47,6 +47,7 @@
     "broccoli-funnel": "^1.0.1",
     "broccoli-merge-trees": "^1.1.1",
     "broccoli-source": "^1.1.0",
+    "broccoli-uglify-js": "^0.1.3",
     "broccoli-writer": "^0.1.1",
     "chalk": "^1.1.3",
     "ember-cli": "2.5.0",