Skip to content

Commit f7424d5

Browse files
pkozlowski-opensourcepkozlowski-opensource
committed
chore: track size of a "Hello world" app built with WebPack
Closes angular#6434
1 parent a593ffa commit f7424d5

7 files changed

Lines changed: 123 additions & 10 deletions

File tree

‎gulpfile.js‎

Lines changed: 74 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ if (cliArgs.projects) {
4242

4343
// --projects=angular2,angular2_material => {angular2: true, angular2_material: true}
4444
var allProjects =
45-
'angular1_router,angular2,angular2_material,benchmarks,benchmarks_external,benchpress,playground,bundle_deps';
45+
'angular1_router,angular2,angular2_material,benchmarks,benchmarks_external,benchpress,playground,payload_tests,bundle_deps';
4646
var cliArgsProjects = (cliArgs.projects || allProjects)
4747
.split(',')
4848
.reduce((map, projectName) => {
@@ -168,6 +168,20 @@ var BENCHPRESS_BUNDLE_CONFIG = {
168168
dest: CONFIG.dest.bundles.benchpress
169169
};
170170

171+
var PAYLOAD_TESTS_CONFIG = {
172+
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+
}
182+
}
183+
};
184+
171185
// ------------
172186
// clean
173187

@@ -638,7 +652,7 @@ gulp.task('test.unit.dart', function(done) {
638652
// This test will fail if the size of our hello_world app goes beyond one of
639653
// these values when compressed at the specified level.
640654
// Measure in bytes.
641-
var _DART_PAYLOAD_SIZE_LIMITS = {'uncompressed': 320 * 1024, 'gzip level=6': 90 * 1024};
655+
var _DART_PAYLOAD_SIZE_LIMITS = {'uncompressed': 320 * 1024, 'gzip level=9': 90 * 1024};
642656
gulp.task('test.payload.dart/ci', function(done) {
643657
runSequence('build/packages.dart', '!pubget.payload.dart', '!pubbuild.payload.dart',
644658
'!checkAndReport.payload.dart', done);
@@ -658,6 +672,64 @@ gulp.task('!checkAndReport.payload.dart', function() {
658672
{failConditions: _DART_PAYLOAD_SIZE_LIMITS, prefix: 'hello_world'});
659673
});
660674

675+
// JS payload size tracking
676+
gulp.task('test.payload.js/ci', function(done) {
677+
runSequence('build.payload.js', '!checkAndReport.payload.js', sequenceComplete(done));
678+
});
679+
680+
gulp.task('build.payload.js', ['build.js.prod'],
681+
function(done) { runSequence('!build.payload.js.webpack', sequenceComplete(done)); });
682+
683+
gulp.task('!build.payload.js.webpack', function() {
684+
var q = require('q');
685+
var webpack = q.denodeify(require('webpack'));
686+
var concat = require('gulp-concat');
687+
var uglify = require('gulp-uglify');
688+
689+
var ES5_PROD_ROOT = __dirname + '/' + CONFIG.dest.js.prod.es5;
690+
691+
return q.all(PAYLOAD_TESTS_CONFIG.ts.webpack.cases.map(function(caseName) {
692+
var CASE_PATH = PAYLOAD_TESTS_CONFIG.ts.webpack.dist(caseName);
693+
694+
return webpack({
695+
// bundle app + framework
696+
entry: CASE_PATH + '/index.js',
697+
output: {path: CASE_PATH, filename: "app-bundle.js"},
698+
resolve: {
699+
extensions: ['', '.js'],
700+
packageAlias: '', // option added to ignore "broken" package.json in our dist folder
701+
root: [ES5_PROD_ROOT]
702+
}
703+
})
704+
.then(function() { // pad bundle with mandatory dependencies
705+
return new Promise(function(resolve, reject) {
706+
gulp.src([
707+
'node_modules/zone.js/dist/zone-microtask.js',
708+
'node_modules/zone.js/dist/long-stack-trace-zone.js',
709+
'node_modules/reflect-metadata/Reflect.js',
710+
CASE_PATH + '/app-bundle.js'
711+
])
712+
.pipe(concat(PAYLOAD_TESTS_CONFIG.ts.webpack.bundleName))
713+
.pipe(uglify())
714+
.pipe(gulp.dest(CASE_PATH))
715+
.on('end', resolve)
716+
.on('error', reject);
717+
});
718+
});
719+
}));
720+
});
721+
722+
gulp.task('!checkAndReport.payload.js', function() {
723+
var reportSize = require('./tools/analytics/reportsize');
724+
var webPackConf = PAYLOAD_TESTS_CONFIG.ts.webpack;
725+
726+
return webPackConf.cases.reduce(function(sizeReportingStreams, caseName) {
727+
sizeReportingStreams.add(
728+
reportSize(webPackConf.dist(caseName) + '/' + webPackConf.bundleName,
729+
{failConditions: PAYLOAD_TESTS_CONFIG.ts.sizeLimits, prefix: caseName}))
730+
}, merge2());
731+
});
732+
661733
gulp.task('watch.dart.dev', function(done) {
662734
runSequence('build/tree.dart', 'build/pure-packages.dart', '!build/pubget.angular2.dart',
663735
'!build/change_detect.dart', '!build/remove-pub-symlinks', 'build.dart.material.css',

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
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>

‎modules/payload_tests/hello_world/ts/webpack/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/bootstrap';
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+
export class HelloCmp {
12+
name = 'World';
13+
}
14+
15+
bootstrap(HelloCmp);

‎scripts/ci/build_and_test.sh‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +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
2526
else
2627
${SCRIPT_DIR}/build_$MODE.sh
2728
${SCRIPT_DIR}/test_$MODE.sh

‎tools/broccoli/trees/browser_tree.ts‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,12 @@ module.exports = function makeBrowserTree(options, destinationPath) {
108108
{include: ['**/**'], exclude: ['e2e_test/**'], destDir: '/benchmarks_external/'});
109109
}
110110

111+
if (modules.payload_tests) {
112+
var payloadTestsTree =
113+
new Funnel('modules/payload_tests',
114+
{include: ['**/ts/**'], exclude: ['e2e_test/**'], destDir: '/payload_tests/'});
115+
}
116+
111117
if (modules.playground) {
112118
var playgroundTree =
113119
new Funnel('modules/playground',
@@ -125,6 +131,7 @@ module.exports = function makeBrowserTree(options, destinationPath) {
125131
angular2MaterialTree,
126132
benchmarksTree,
127133
benchmarksExternalTree,
134+
payloadTestsTree,
128135
playgroundTree,
129136
benchpressTree
130137
]);
@@ -215,8 +222,10 @@ module.exports = function makeBrowserTree(options, destinationPath) {
215222
modulesTree, {include: ['**/*'], exclude: ['**/*.{html,ts,dart}'], destDir: '/'});
216223
}
217224

218-
var htmlTree = new Funnel(
219-
modulesTree, {include: ['*/src/**/*.html', '**/playground/**/*.html'], destDir: '/'});
225+
var htmlTree = new Funnel(modulesTree, {
226+
include: ['*/src/**/*.html', '**/playground/**/*.html', '**/payload_tests/**/ts/**/*.html'],
227+
destDir: '/'
228+
});
220229

221230
if (modules.benchmarks || modules.benchmarks_external || modules.playground) {
222231
htmlTree = replace(htmlTree, {

‎tools/broccoli/trees/dart_tree.ts‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,17 +14,18 @@ import dartfmt from '../broccoli-dartfmt';
1414
import replace from '../broccoli-replace';
1515

1616
var global_excludes = [
17-
'angular2/http*',
18-
'angular2/upgrade*',
1917
'angular2/examples/**/ts/**/*',
18+
'angular2/http*',
2019
'angular2/http/**/*',
2120
'angular2/src/http/**/*',
22-
'angular2/test/http/**/*',
2321
'angular2/src/upgrade/**/*',
22+
'angular2/test/http/**/*',
2423
'angular2/test/upgrade/**/*',
24+
'angular2/upgrade*',
25+
'payload_tests/**/ts/**/*',
2526
'playground/src/http/**/*',
26-
'playground/test/http/**/*',
2727
'playground/src/jsonp/**/*',
28+
'playground/test/http/**/*',
2829
'playground/test/jsonp/**/*'
2930
];
3031

@@ -145,7 +146,12 @@ function getDocsTree() {
145146
var licenses = new MultiCopy('', {
146147
srcPath: 'LICENSE',
147148
targetPatterns: ['modules/*'],
148-
exclude: ['*/angular2/src/http', '*/upgrade', '*/angular1_router'] // Not in dart.
149+
exclude: [
150+
'*/angular1_router',
151+
'*/angular2/src/http',
152+
'*/payload_tests',
153+
'*/upgrade'
154+
] // Not in dart.
149155
});
150156
licenses = stew.rename(licenses, stripModulePrefix);
151157

‎tools/broccoli/trees/node_tree.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,8 +74,8 @@ module.exports = function makeNodeTree(projects, destinationPath) {
7474
'angular2/test/web_workers/worker/renderer_integration_spec.ts',
7575

7676
'angular2/test/upgrade/**/*.ts',
77-
7877
'angular1_router/**',
78+
'payload_tests/**'
7979
]
8080
});
8181

0 commit comments

Comments
 (0)