X Tutup
Skip to content

Commit 9c96b8a

Browse files
pkozlowski-opensourcepkozlowski-opensource
committed
chore: track size of a "Hello world" app built with SystemJS
Closes angular#6621
1 parent 132829e commit 9c96b8a

File tree

6 files changed

+89
-24
lines changed

6 files changed

+89
-24
lines changed

‎gulpfile.js‎

Lines changed: 60 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -170,15 +170,14 @@ var BENCHPRESS_BUNDLE_CONFIG = {
170170

171171
var PAYLOAD_TESTS_CONFIG = {
172172
ts: {
173-
sizeLimits: {'uncompressed': 550 * 1024, 'gzip level=9': 120 * 1024},
174-
webpack: {
175-
cases: ['hello_world'],
176-
bundleName: 'app-bundle-deps.min.js',
177-
dist: function(caseName) {
178-
return path.join(__dirname, CONFIG.dest.js.prod.es5, 'payload_tests', caseName,
179-
'ts/webpack');
180-
}
181-
}
173+
bundleName: 'app-bundle-deps.min.js',
174+
cases: ['hello_world'],
175+
dist: function(caseName, packaging) {
176+
return path.join(__dirname, CONFIG.dest.js.prod.es5, 'payload_tests', caseName,
177+
'ts/' + packaging);
178+
},
179+
systemjs: {sizeLimits: {'uncompressed': 850 * 1024, 'gzip level=9': 165 * 1024}},
180+
webpack: {sizeLimits: {'uncompressed': 550 * 1024, 'gzip level=9': 120 * 1024}}
182181
}
183182
};
184183

@@ -678,19 +677,18 @@ gulp.task('test.payload.js/ci', function(done) {
678677
runSequence('build.payload.js', '!checkAndReport.payload.js', sequenceComplete(done));
679678
});
680679

681-
gulp.task('build.payload.js', ['build.js.prod'],
682-
function(done) { runSequence('!build.payload.js.webpack', sequenceComplete(done)); });
680+
gulp.task('build.payload.js', ['build.js'], function(done) {
681+
runSequence('!build.payload.js.webpack', '!build.payload.js.systemjs', sequenceComplete(done));
682+
});
683683

684684
gulp.task('!build.payload.js.webpack', function() {
685685
var q = require('q');
686686
var webpack = q.denodeify(require('webpack'));
687-
var concat = require('gulp-concat');
688-
var uglify = require('gulp-uglify');
689687

690688
var ES5_PROD_ROOT = __dirname + '/' + CONFIG.dest.js.prod.es5;
691689

692-
return q.all(PAYLOAD_TESTS_CONFIG.ts.webpack.cases.map(function(caseName) {
693-
var CASE_PATH = PAYLOAD_TESTS_CONFIG.ts.webpack.dist(caseName);
690+
return q.all(PAYLOAD_TESTS_CONFIG.ts.cases.map(function(caseName) {
691+
var CASE_PATH = PAYLOAD_TESTS_CONFIG.ts.dist(caseName, 'webpack');
694692

695693
return webpack({
696694
// bundle app + framework
@@ -710,8 +708,41 @@ gulp.task('!build.payload.js.webpack', function() {
710708
'node_modules/reflect-metadata/Reflect.js',
711709
CASE_PATH + '/app-bundle.js'
712710
])
713-
.pipe(concat(PAYLOAD_TESTS_CONFIG.ts.webpack.bundleName))
714-
.pipe(uglify())
711+
.pipe(gulpPlugins.concat(PAYLOAD_TESTS_CONFIG.ts.bundleName))
712+
.pipe(gulpPlugins.uglify())
713+
.pipe(gulp.dest(CASE_PATH))
714+
.on('end', resolve)
715+
.on('error', reject);
716+
});
717+
});
718+
}));
719+
});
720+
721+
gulp.task('!build.payload.js.systemjs', function() {
722+
var bundler = require('./tools/build/bundle');
723+
724+
return Promise.all(PAYLOAD_TESTS_CONFIG.ts.cases.map(function(caseName) {
725+
var CASE_PATH = PAYLOAD_TESTS_CONFIG.ts.dist(caseName, 'systemjs');
726+
727+
return bundler
728+
.bundle(
729+
{
730+
paths: {'index': CASE_PATH + '/index.js'},
731+
meta: {'angular2/core': {build: false}, 'angular2/platform/browser': {build: false}}
732+
},
733+
'index', CASE_PATH + '/index.register.js', {})
734+
.then(function() {
735+
return new Promise(function(resolve, reject) {
736+
gulp.src([
737+
'node_modules/systemjs/dist/system.src.js',
738+
'dist/js/prod/es5/bundle/angular2-polyfills.js',
739+
'dist/js/prod/es5/bundle/angular2.js',
740+
'dist/js/prod/es5//rxjs/bundles/Rx.js',
741+
CASE_PATH + '/index.register.js',
742+
'tools/build/systemjs/payload_tests_import.js'
743+
])
744+
.pipe(gulpPlugins.concat(PAYLOAD_TESTS_CONFIG.ts.bundleName))
745+
.pipe(gulpPlugins.uglify())
715746
.pipe(gulp.dest(CASE_PATH))
716747
.on('end', resolve)
717748
.on('error', reject);
@@ -722,12 +753,19 @@ gulp.task('!build.payload.js.webpack', function() {
722753

723754
gulp.task('!checkAndReport.payload.js', function() {
724755
var reportSize = require('./tools/analytics/reportsize');
725-
var webPackConf = PAYLOAD_TESTS_CONFIG.ts.webpack;
726756

727-
return webPackConf.cases.reduce(function(sizeReportingStreams, caseName) {
728-
sizeReportingStreams.add(
729-
reportSize(webPackConf.dist(caseName) + '/' + webPackConf.bundleName,
730-
{failConditions: PAYLOAD_TESTS_CONFIG.ts.sizeLimits, prefix: caseName}))
757+
function caseSizeStream(caseName, packaging) {
758+
return reportSize(PAYLOAD_TESTS_CONFIG.ts.dist(caseName, packaging) + '/' +
759+
PAYLOAD_TESTS_CONFIG.ts.bundleName,
760+
{
761+
failConditions: PAYLOAD_TESTS_CONFIG.ts[packaging].sizeLimits,
762+
prefix: caseName + '_' + packaging
763+
})
764+
}
765+
766+
return PAYLOAD_TESTS_CONFIG.ts.cases.reduce(function(sizeReportingStreams, caseName) {
767+
sizeReportingStreams.add(caseSizeStream(caseName, 'systemjs'));
768+
sizeReportingStreams.add(caseSizeStream(caseName, 'webpack'));
731769
}, merge2());
732770
});
733771

‎modules/payload_tests/hello_world/ts/systemjs/index.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!doctype html>
2+
<html>
3+
<title>Angular 2.0 Hello World payload test</title>
4+
<body>
5+
<hello-app>
6+
Loading...
7+
</hello-app>
8+
<script src="app-bundle-deps.min.js"></script>
9+
</body>
10+
</html>
11+

‎modules/payload_tests/hello_world/ts/systemjs/index.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import {Component} from 'angular2/core';
2+
import {bootstrap} from 'angular2/platform/browser';
3+
4+
@Component({
5+
selector: 'hello-app',
6+
template: `
7+
<h1>Hello, {{name}}!</h1>
8+
<label> Say hello to: <input [value]="name" (input)="name = $event.target.value"></label>
9+
`
10+
})
11+
class HelloCmp {
12+
name = 'World';
13+
}
14+
15+
bootstrap(HelloCmp);

‎scripts/ci/build_and_test.sh‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ elif [ "$MODE" = "build_only" ]; then
2222
elif [ "$MODE" = "payload" ]; then
2323
source ${SCRIPT_DIR}/env_dart.sh
2424
./node_modules/.bin/gulp test.payload.dart/ci
25-
./node_modules/.bin/gulp test.payload.js/ci
25+
node --max-old-space-size=2000 ./node_modules/.bin/gulp test.payload.js/ci
2626
else
2727
${SCRIPT_DIR}/build_$MODE.sh
2828
${SCRIPT_DIR}/test_$MODE.sh

‎tools/broccoli/trees/browser_tree.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -227,7 +227,7 @@ module.exports = function makeBrowserTree(options, destinationPath) {
227227
destDir: '/'
228228
});
229229

230-
if (modules.benchmarks || modules.benchmarks_external || modules.playground) {
230+
if (modules.playground) {
231231
htmlTree = replace(htmlTree, {
232232
files: ['playground*/**/*.html'],
233233
patterns: [

‎tools/build/systemjs/payload_tests_import.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
System.import('index').catch(console.error.bind(console));

0 commit comments

Comments
 (0)
X Tutup