honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: track size of a "Hello world" app built with SystemJS 

Closes #6621
This commit is contained in:
Pawel Kozlowski 2016-01-20 17:56:00 +01:00
parent 132829e5e2
commit 9c96b8affc
6 changed files with 89 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
gulpfile.js
View File

@ -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());
});

11
modules/payload_tests/hello_world/ts/systemjs/index.html Normal file
View File

@ -0,0 +1,11 @@
<!doctype html>
<html>
<title>Angular 2.0 Hello World payload test</title>
<body>
<hello-app>
Loading...
</hello-app>
<script src="app-bundle-deps.min.js"></script>
</body>
</html>

15
modules/payload_tests/hello_world/ts/systemjs/index.ts Normal file
View File

@ -0,0 +1,15 @@
import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
@Component({
selector: 'hello-app',
template: `
<h1>Hello, {{name}}!</h1>
<label> Say hello to: <input [value]="name" (input)="name = $event.target.value"></label>
`
})
class HelloCmp {
name = 'World';
}
bootstrap(HelloCmp);

2
scripts/ci/build_and_test.sh
View File

@ -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

2
tools/broccoli/trees/browser_tree.ts
View File

@ -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: [

1
tools/build/systemjs/payload_tests_import.js Normal file
View File

@ -0,0 +1 @@
System.import('index').catch(console.error.bind(console));