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

jeffbcross · jeffbcross · commit 51569ce674d1 · 2016-05-11T21:13:59.000-07:00
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.
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",

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+System.import('system-config.js').then(function () {`
	`2`	`+ System.import('main');`
	`3`	`+}).catch(console.error.bind(console));`