From 9c96b8affcb5c8103c54feb1da76e7a893fa5736 Mon Sep 17 00:00:00 2001 From: Pawel Kozlowski Date: Wed, 20 Jan 2016 17:56:00 +0100 Subject: [PATCH] chore: track size of a "Hello world" app built with SystemJS Closes #6621 --- gulpfile.js | 82 ++++++++++++++----- .../hello_world/ts/systemjs/index.html | 11 +++ .../hello_world/ts/systemjs/index.ts | 15 ++++ scripts/ci/build_and_test.sh | 2 +- tools/broccoli/trees/browser_tree.ts | 2 +- tools/build/systemjs/payload_tests_import.js | 1 + 6 files changed, 89 insertions(+), 24 deletions(-) create mode 100644 modules/payload_tests/hello_world/ts/systemjs/index.html create mode 100644 modules/payload_tests/hello_world/ts/systemjs/index.ts create mode 100644 tools/build/systemjs/payload_tests_import.js diff --git a/gulpfile.js b/gulpfile.js index 27231352c3..2058ea219b 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -170,15 +170,14 @@ var BENCHPRESS_BUNDLE_CONFIG = { var PAYLOAD_TESTS_CONFIG = { ts: { - sizeLimits: {'uncompressed': 550 * 1024, 'gzip level=9': 120 * 1024}, - webpack: { - cases: ['hello_world'], - bundleName: 'app-bundle-deps.min.js', - dist: function(caseName) { - return path.join(__dirname, CONFIG.dest.js.prod.es5, 'payload_tests', caseName, - 'ts/webpack'); - } - } + bundleName: 'app-bundle-deps.min.js', + cases: ['hello_world'], + dist: function(caseName, packaging) { + return path.join(__dirname, CONFIG.dest.js.prod.es5, 'payload_tests', caseName, + 'ts/' + packaging); + }, + systemjs: {sizeLimits: {'uncompressed': 850 * 1024, 'gzip level=9': 165 * 1024}}, + webpack: {sizeLimits: {'uncompressed': 550 * 1024, 'gzip level=9': 120 * 1024}} } }; @@ -678,19 +677,18 @@ gulp.task('test.payload.js/ci', function(done) { runSequence('build.payload.js', '!checkAndReport.payload.js', sequenceComplete(done)); }); -gulp.task('build.payload.js', ['build.js.prod'], - function(done) { runSequence('!build.payload.js.webpack', sequenceComplete(done)); }); +gulp.task('build.payload.js', ['build.js'], function(done) { + runSequence('!build.payload.js.webpack', '!build.payload.js.systemjs', sequenceComplete(done)); +}); gulp.task('!build.payload.js.webpack', function() { var q = require('q'); var webpack = q.denodeify(require('webpack')); - var concat = require('gulp-concat'); - var uglify = require('gulp-uglify'); var ES5_PROD_ROOT = __dirname + '/' + CONFIG.dest.js.prod.es5; - return q.all(PAYLOAD_TESTS_CONFIG.ts.webpack.cases.map(function(caseName) { - var CASE_PATH = PAYLOAD_TESTS_CONFIG.ts.webpack.dist(caseName); + return q.all(PAYLOAD_TESTS_CONFIG.ts.cases.map(function(caseName) { + var CASE_PATH = PAYLOAD_TESTS_CONFIG.ts.dist(caseName, 'webpack'); return webpack({ // bundle app + framework @@ -710,8 +708,41 @@ gulp.task('!build.payload.js.webpack', function() { 'node_modules/reflect-metadata/Reflect.js', CASE_PATH + '/app-bundle.js' ]) - .pipe(concat(PAYLOAD_TESTS_CONFIG.ts.webpack.bundleName)) - .pipe(uglify()) + .pipe(gulpPlugins.concat(PAYLOAD_TESTS_CONFIG.ts.bundleName)) + .pipe(gulpPlugins.uglify()) + .pipe(gulp.dest(CASE_PATH)) + .on('end', resolve) + .on('error', reject); + }); + }); + })); +}); + +gulp.task('!build.payload.js.systemjs', function() { + var bundler = require('./tools/build/bundle'); + + return Promise.all(PAYLOAD_TESTS_CONFIG.ts.cases.map(function(caseName) { + var CASE_PATH = PAYLOAD_TESTS_CONFIG.ts.dist(caseName, 'systemjs'); + + return bundler + .bundle( + { + paths: {'index': CASE_PATH + '/index.js'}, + meta: {'angular2/core': {build: false}, 'angular2/platform/browser': {build: false}} + }, + 'index', CASE_PATH + '/index.register.js', {}) + .then(function() { + return new Promise(function(resolve, reject) { + gulp.src([ + 'node_modules/systemjs/dist/system.src.js', + 'dist/js/prod/es5/bundle/angular2-polyfills.js', + 'dist/js/prod/es5/bundle/angular2.js', + 'dist/js/prod/es5//rxjs/bundles/Rx.js', + CASE_PATH + '/index.register.js', + 'tools/build/systemjs/payload_tests_import.js' + ]) + .pipe(gulpPlugins.concat(PAYLOAD_TESTS_CONFIG.ts.bundleName)) + .pipe(gulpPlugins.uglify()) .pipe(gulp.dest(CASE_PATH)) .on('end', resolve) .on('error', reject); @@ -722,12 +753,19 @@ gulp.task('!build.payload.js.webpack', function() { gulp.task('!checkAndReport.payload.js', function() { var reportSize = require('./tools/analytics/reportsize'); - var webPackConf = PAYLOAD_TESTS_CONFIG.ts.webpack; - return webPackConf.cases.reduce(function(sizeReportingStreams, caseName) { - sizeReportingStreams.add( - reportSize(webPackConf.dist(caseName) + '/' + webPackConf.bundleName, - {failConditions: PAYLOAD_TESTS_CONFIG.ts.sizeLimits, prefix: caseName})) + function caseSizeStream(caseName, packaging) { + return reportSize(PAYLOAD_TESTS_CONFIG.ts.dist(caseName, packaging) + '/' + + PAYLOAD_TESTS_CONFIG.ts.bundleName, + { + failConditions: PAYLOAD_TESTS_CONFIG.ts[packaging].sizeLimits, + prefix: caseName + '_' + packaging + }) + } + + return PAYLOAD_TESTS_CONFIG.ts.cases.reduce(function(sizeReportingStreams, caseName) { + sizeReportingStreams.add(caseSizeStream(caseName, 'systemjs')); + sizeReportingStreams.add(caseSizeStream(caseName, 'webpack')); }, merge2()); }); diff --git a/modules/payload_tests/hello_world/ts/systemjs/index.html b/modules/payload_tests/hello_world/ts/systemjs/index.html new file mode 100644 index 0000000000..bb8f8684d0 --- /dev/null +++ b/modules/payload_tests/hello_world/ts/systemjs/index.html @@ -0,0 +1,11 @@ + + + Angular 2.0 Hello World payload test + + + Loading... + + + + + diff --git a/modules/payload_tests/hello_world/ts/systemjs/index.ts b/modules/payload_tests/hello_world/ts/systemjs/index.ts new file mode 100644 index 0000000000..b049730c01 --- /dev/null +++ b/modules/payload_tests/hello_world/ts/systemjs/index.ts @@ -0,0 +1,15 @@ +import {Component} from 'angular2/core'; +import {bootstrap} from 'angular2/platform/browser'; + +@Component({ + selector: 'hello-app', + template: ` +

Hello, {{name}}!

+ +` +}) +class HelloCmp { + name = 'World'; +} + +bootstrap(HelloCmp); diff --git a/scripts/ci/build_and_test.sh b/scripts/ci/build_and_test.sh index d13bfa0eb0..c3aceb2fcf 100755 --- a/scripts/ci/build_and_test.sh +++ b/scripts/ci/build_and_test.sh @@ -22,7 +22,7 @@ elif [ "$MODE" = "build_only" ]; then elif [ "$MODE" = "payload" ]; then source ${SCRIPT_DIR}/env_dart.sh ./node_modules/.bin/gulp test.payload.dart/ci - ./node_modules/.bin/gulp test.payload.js/ci + node --max-old-space-size=2000 ./node_modules/.bin/gulp test.payload.js/ci else ${SCRIPT_DIR}/build_$MODE.sh ${SCRIPT_DIR}/test_$MODE.sh diff --git a/tools/broccoli/trees/browser_tree.ts b/tools/broccoli/trees/browser_tree.ts index 5edd8777cb..ea17be1854 100644 --- a/tools/broccoli/trees/browser_tree.ts +++ b/tools/broccoli/trees/browser_tree.ts @@ -227,7 +227,7 @@ module.exports = function makeBrowserTree(options, destinationPath) { destDir: '/' }); - if (modules.benchmarks || modules.benchmarks_external || modules.playground) { + if (modules.playground) { htmlTree = replace(htmlTree, { files: ['playground*/**/*.html'], patterns: [ diff --git a/tools/build/systemjs/payload_tests_import.js b/tools/build/systemjs/payload_tests_import.js new file mode 100644 index 0000000000..bd87ac75b7 --- /dev/null +++ b/tools/build/systemjs/payload_tests_import.js @@ -0,0 +1 @@ +System.import('index').catch(console.error.bind(console));