refactor(dev-infra): ng_rollup_bundle rule should leverage @bazel/rollup (#37623)

Refactors the `ng_rollup_bundle` rule to a macro that relies on
the `@bazel/rollup` package. This means that the rule no longer
deals with custom ESM5 flavour output, but rather only builds
prodmode ES2015 output. This matches the common build output
in Angular projects, and optimizations done in CLI where
ES2015 is the default optimization input.

The motiviation for this change is:

* Not duplicating rollup Bazel rules. Instead leveraging the official
rollup rule.
* Not dealing with a third TS output flavor in Bazel.The ESM5 flavour has the
potential of slowing down local development (as it requires compilation replaying)
* Updating the rule to be aligned with current CLI optimizations.

This also _fixes_ a bug that surfaced in the old rollup bundle rule.
Code that is unused, is not removed properly. The new rule fixes this by
setting the `toplevel` flag. This instructs terser to remove unused
definitions at top-level. This matches the optimization applied in CLI
projects. Notably the CLI doesn't need this flag, as code is always
wrapped by Webpack. Hence, the unused code eliding runs by default.

PR Close #37623
This commit is contained in:
Paul Gschwendtner
2020-06-17 10:37:36 +02:00
committed by Misko Hevery
parent 6898eab946
commit 1601ee6f6a
30 changed files with 297 additions and 761 deletions

View File

@ -1,19 +1,19 @@
### Build
```
yarn bazel build //packages/core/test/render3/perf:${BENCHMARK}_lib.min_debug.es2015.js --config=ivy
yarn bazel build //packages/core/test/render3/perf:${BENCHMARK}_lib.min_debug.js --config=ivy
```
### Run
```
node dist/bin/packages/core/test/render3/perf/${BENCHMARK}_lib.min_debug.es2015.js
node dist/bin/packages/core/test/render3/perf/${BENCHMARK}_lib.min_debug.js
```
### Profile
```
node --no-turbo-inlining --inspect-brk dist/bin/packages/core/test/render3/perf/${BENCHMARK}_lib.min_debug.es2015.js
node --no-turbo-inlining --inspect-brk dist/bin/packages/core/test/render3/perf/${BENCHMARK}_lib.min_debug.js
```
then connect with a debugger (the `--inspect-brk` option will make sure that benchmark execution doesn't start until a debugger is connected and the code execution is manually resumed).
@ -24,7 +24,7 @@ The actual benchmark code has calls that will start (`console.profile`) and stop
```
yarn add deoptigate
yarn deoptigate dist/bin/packages/core/test/render3/perf/${BENCHMARK}_lib.min_debug.es2015.js
yarn deoptigate dist/bin/packages/core/test/render3/perf/${BENCHMARK}_lib.min_debug.js
```
### Run All
@ -83,4 +83,4 @@ To debug
- Follow the directions in `profile_in_browser.html`
OR
- `yarn bazel build --config=ivy //packages/core/test/render3/perf:noop_change_detection`
- `node --inspect-brk bazel-out/darwin-fastbuild/bin/packages/core/test/render3/perf/noop_change_detection.min_debug.es2015.js`
- `node --inspect-brk bazel-out/darwin-fastbuild/bin/packages/core/test/render3/perf/noop_change_detection.min_debug.js`

View File

@ -30,7 +30,7 @@ const profileTests =
// build tests
shell.exec(
`yarn bazel build --config=ivy ` +
profileTests.map((name) => `//packages/core/test/render3/perf:${name}_lib.min_debug.es2015.js`)
profileTests.map((name) => `//packages/core/test/render3/perf:${name}_lib.min_debug.js`)
.join(' '));
// profile tests
@ -60,8 +60,7 @@ if (readPath) {
profileTests.forEach((name) => {
// tslint:disable-next-line:no-console
console.log('----------------', name, '----------------');
const log =
shell.exec(`node dist/bin/packages/core/test/render3/perf/${name}_lib.min_debug.es2015.js`);
const log = shell.exec(`node dist/bin/packages/core/test/render3/perf/${name}_lib.min_debug.js`);
if (log.code != 0) throw new Error(log);
const matches = log.stdout.match(/: ([\d\.]+) (.s)/);
const runTime = times[name] || (times[name] = {name: name});

View File

@ -2,11 +2,11 @@
<script>
let BASE = location.toString().split('packages/core/test/render3/perf')[0]
let BENCHMARK = location.search.split('=')[1];
document.writeln('<' + 'script src="' + BASE + '/dist/bin/packages/core/test/render3/perf/' + BENCHMARK + '.min_debug.es2015.js"></' + 'script>');
document.writeln('<' + 'script src="' + BASE + '/dist/bin/packages/core/test/render3/perf/' + BENCHMARK + '.min_debug.js"></' + 'script>');
</script>
<body>
<ol>
<li>Build the benchmark using <tt>yarn bazel build //packages/core/test/render3/perf:${BENCHMARK}.min_debug.es2015.js --config=ivy</tt></li>
<li>Build the benchmark using <tt>yarn bazel build //packages/core/test/render3/perf:${BENCHMARK}.min_debug.js --config=ivy</tt></li>
<li>Open this file using the <tt>file://</tt> protocol and add <tt>?benchmark=BENCHMARK</tt> to the URL.</li>
<li>
Note: You should likely run this in an incognito browser with the "no-turbo-inlining" flag.<br />