cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf(ivy): move attributes array into component def (#32798)

Browse Source 
Currently Ivy stores the element attributes into an array above the component def and passes it into the relevant instructions, however the problem is that upon minification the array will get a unique name which won't compress very well. These changes move the attributes array into the component def and pass in the index into the instructions instead.

Before:
```
const _c0 = ['foo', 'bar'];

SomeComp.ngComponentDef = defineComponent({
  template: function() {
    element(0, 'div', _c0);
  }
});
```

After:
```
SomeComp.ngComponentDef = defineComponent({
  consts: [['foo', 'bar']],
  template: function() {
    element(0, 'div', 0);
  }
});
```

A couple of cases that this PR doesn't handle:
* Template references are still in a separate array.
* i18n attributes are still in a separate array.

PR Close #32798
This commit is contained in:
crisbeto
2019-09-23 20:08:51 +02:00
committed by Alex Rickabaugh
parent b2b917d2d8
commit d5b87d32b0
52 changed files with 912 additions and 885 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
packages/compiler-cli/test/compliance/r3_view_compiler_template_spec.ts
View File

@ -50,14 +50,10 @@ describe('compiler compliance: template', () => {
// The template should look like this (where IDENT is a wild card for an identifier):
const template = `
const $c0$ = [${AttributeMarker.Template}, "ngFor", "ngForOf"];
const $c1$ = [${AttributeMarker.Bindings}, "title", "click", ${AttributeMarker.Template}, "ngFor", "ngForOf"];
const $c2$ = [${AttributeMarker.Bindings}, "title", "click"];
function MyComponent_ul_0_li_1_div_1_Template(rf, ctx) {
if (rf & 1) {
const $s$ = $i0$.ɵɵgetCurrentView();
$i0$.ɵɵelementStart(0, "div", $c2$);
$i0$.ɵɵelementStart(0, "div", 2);
$i0$.ɵɵlistener("click", function MyComponent_ul_0_li_1_div_1_Template_div_click_0_listener($event){
$i0$.ɵɵrestoreView($s$);
const $inner$ = ctx.$implicit;
@ -84,7 +80,7 @@ describe('compiler compliance: template', () => {
function MyComponent_ul_0_li_1_Template(rf, ctx) {
if (rf & 1) {
$i0$.ɵɵelementStart(0, "li");
$i0$.ɵɵtemplate(1, MyComponent_ul_0_li_1_div_1_Template, 2, 2, "div", $c1$);
$i0$.ɵɵtemplate(1, MyComponent_ul_0_li_1_div_1_Template, 2, 2, "div", 1);
$i0$.ɵɵelementEnd();
}
if (rf & 2) {
@ -97,7 +93,7 @@ describe('compiler compliance: template', () => {
function MyComponent_ul_0_Template(rf, ctx) {
if (rf & 1) {
$i0$.ɵɵelementStart(0, "ul");
$i0$.ɵɵtemplate(1, MyComponent_ul_0_li_1_Template, 2, 1, "li", $c0$);
$i0$.ɵɵtemplate(1, MyComponent_ul_0_li_1_Template, 2, 1, "li", 0);
$i0$.ɵɵelementEnd();
}
if (rf & 2) {
@ -107,9 +103,10 @@ describe('compiler compliance: template', () => {
}
}
// ...
consts: [[${AttributeMarker.Template}, "ngFor", "ngForOf"], [${AttributeMarker.Bindings}, "title", "click", ${AttributeMarker.Template}, "ngFor", "ngForOf"], [${AttributeMarker.Bindings}, "title", "click"]],
template:function MyComponent_Template(rf, ctx){
if (rf & 1) {
$i0$.ɵɵtemplate(0, MyComponent_ul_0_Template, 2, 1, "ul", $c0$);
$i0$.ɵɵtemplate(0, MyComponent_ul_0_Template, 2, 1, "ul", 0);
}
if (rf & 2) {
$i0$.ɵɵproperty("ngForOf", ctx.items);
@ -145,13 +142,10 @@ describe('compiler compliance: template', () => {
};
const template = `
const $t0_attrs$ = [${AttributeMarker.Bindings}, "click", ${AttributeMarker.Template}, "ngFor", "ngForOf"];
const $e_attrs$ = [${AttributeMarker.Bindings}, "click"];
function MyComponent_div_0_Template(rf, ctx) {
if (rf & 1) {
const $s$ = $r3$.ɵɵgetCurrentView();
$r3$.ɵɵelementStart(0, "div", $e_attrs$);
$r3$.ɵɵelementStart(0, "div", 1);
$r3$.ɵɵlistener("click", function MyComponent_div_0_Template_div_click_0_listener($event) {
$r3$.ɵɵrestoreView($s$);
const $d$ = ctx.$implicit;
@ -163,9 +157,10 @@ describe('compiler compliance: template', () => {
}
}
// ...
consts: [[${AttributeMarker.Bindings}, "click", ${AttributeMarker.Template}, "ngFor", "ngForOf"], [${AttributeMarker.Bindings}, "click"]],
template: function MyComponent_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵtemplate(0, MyComponent_div_0_Template, 1, 0, "div", $t0_attrs$);
$r3$.ɵɵtemplate(0, MyComponent_div_0_Template, 1, 0, "div", 0);
}
if (rf & 2) {
$r3$.ɵɵproperty("ngForOf", ctx._data);
@ -205,7 +200,7 @@ describe('compiler compliance: template', () => {
function MyComponent_div_0_Template(rf, ctx) {
if (rf & 1) {
const $_r2$ = i0.ɵɵgetCurrentView();
$r3$.ɵɵelementStart(0, "div", $_c1$);
$r3$.ɵɵelementStart(0, "div", 2);
$r3$.ɵɵlistener("click", function MyComponent_div_0_Template_div_click_0_listener($event) {
i0.ɵɵrestoreView($_r2$);
const $ctx_r1$ = i0.ɵɵnextContext();
@ -217,7 +212,7 @@ describe('compiler compliance: template', () => {
// ...
function MyComponent_div_1_Template(rf, ctx) {
if (rf & 1) {
$r3$.ɵɵelement(0, "div", $_c3$);
$r3$.ɵɵelement(0, "div", 3);
} if (rf & 2) {
const $ctx_0$ = i0.ɵɵnextContext();
$r3$.ɵɵproperty("id", $ctx_0$);
@ -252,8 +247,6 @@ describe('compiler compliance: template', () => {
};
const template = `
const $c0$ = [${AttributeMarker.Template}, "ngFor", "ngForOf"];
function MyComponent_span_0_Template(rf, ctx) {
if (rf & 1) {
$i0$.ɵɵelementStart(0, "span");
@ -268,9 +261,10 @@ describe('compiler compliance: template', () => {
}
}
// ...
consts: [[${AttributeMarker.Template}, "ngFor", "ngForOf"]],
template:function MyComponent_Template(rf, ctx){
if (rf & 1) {
$i0$.ɵɵtemplate(0, MyComponent_span_0_Template, 2, 2, "span", _c0);
$i0$.ɵɵtemplate(0, MyComponent_span_0_Template, 2, 2, "span", 0);
}
if (rf & 2) {
$i0$.ɵɵproperty("ngForOf", ctx.items);
@ -306,9 +300,6 @@ describe('compiler compliance: template', () => {
};
const template = `
const $c0$ = [${AttributeMarker.Template}, "ngFor", "ngForOf"];
const $c1$ = [${AttributeMarker.Template}, "ngIf"];
function MyComponent_div_0_span_1_Template(rf, ctx) {
if (rf & 1) {
$i0$.ɵɵelementStart(0, "span");
@ -327,7 +318,7 @@ describe('compiler compliance: template', () => {
function MyComponent_div_0_Template(rf, ctx) {
if (rf & 1) {
$i0$.ɵɵelementStart(0, "div");
$i0$.ɵɵtemplate(1, MyComponent_div_0_span_1_Template, 2, 2, "span", $c1$);
$i0$.ɵɵtemplate(1, MyComponent_div_0_span_1_Template, 2, 2, "span", 1);
$i0$.ɵɵelementEnd();
}
if (rf & 2) {
@ -338,9 +329,10 @@ describe('compiler compliance: template', () => {
}
// ...
consts: [[${AttributeMarker.Template}, "ngFor", "ngForOf"], [${AttributeMarker.Template}, "ngIf"]],
template:function MyComponent_Template(rf, ctx){
if (rf & 1) {
$i0$.ɵɵtemplate(0, MyComponent_div_0_Template, 2, 1, "div", $c0$);
$i0$.ɵɵtemplate(0, MyComponent_div_0_Template, 2, 1, "div", 0);
}
if (rf & 2) {
$i0$.ɵɵproperty("ngForOf", ctx.items);
@ -379,7 +371,6 @@ describe('compiler compliance: template', () => {
// The template should look like this (where IDENT is a wild card for an identifier):
const template = `
const $c0$ = [${AttributeMarker.Template}, "ngFor", "ngForOf"];
function MyComponent_div_0_div_1_div_1_Template(rf, ctx) {
if (rf & 1) {
$i0$.ɵɵelementStart(0, "div");
@ -397,7 +388,7 @@ describe('compiler compliance: template', () => {
function MyComponent_div_0_div_1_Template(rf, ctx) {
if (rf & 1) {
$i0$.ɵɵelementStart(0, "div");
$i0$.ɵɵtemplate(1, MyComponent_div_0_div_1_div_1_Template, 2, 2, "div", $c0$);
$i0$.ɵɵtemplate(1, MyComponent_div_0_div_1_div_1_Template, 2, 2, "div", 0);
$i0$.ɵɵelementEnd();
}
if (rf & 2) {
@ -410,7 +401,7 @@ describe('compiler compliance: template', () => {
function MyComponent_div_0_Template(rf, ctx) {
if (rf & 1) {
$i0$.ɵɵelementStart(0, "div");
$i0$.ɵɵtemplate(1, MyComponent_div_0_div_1_Template, 2, 1, "div", $c0$);
$i0$.ɵɵtemplate(1, MyComponent_div_0_div_1_Template, 2, 1, "div", 0);
$i0$.ɵɵelementEnd();
}
if (rf & 2) {
@ -420,9 +411,10 @@ describe('compiler compliance: template', () => {
}
}
// ...
consts: [[${AttributeMarker.Template}, "ngFor", "ngForOf"]],
template:function MyComponent_Template(rf, ctx){
if (rf & 1) {
$i0$.ɵɵtemplate(0, MyComponent_div_0_Template, 2, 1, "div", $c0$);
$i0$.ɵɵtemplate(0, MyComponent_div_0_Template, 2, 1, "div", 0);
}
if (rf & 2) {
$i0$.ɵɵproperty("ngForOf", ctx.items);
@ -456,8 +448,6 @@ describe('compiler compliance: template', () => {
};
const template = `
const $c0$ = ["attr", "l", ${AttributeMarker.Bindings}, "boundAttr"];
function MyComponent_ng_template_0_Template(rf, ctx) {
if (rf & 1) {
$i0$.ɵɵtext(0, " some-content ");
@ -466,9 +456,10 @@ describe('compiler compliance: template', () => {
// ...
consts: [["attr", "l", ${AttributeMarker.Bindings}, "boundAttr"]],
template: function MyComponent_Template(rf, ctx) {
if (rf & 1) {
$i0$.ɵɵtemplate(0, MyComponent_ng_template_0_Template, 1, 0, "ng-template", $c0$);
$i0$.ɵɵtemplate(0, MyComponent_ng_template_0_Template, 1, 0, "ng-template", 0);
}
if (rf & 2) {
$i0$.ɵɵproperty("boundAttr", ctx.b);
@ -541,15 +532,14 @@ describe('compiler compliance: template', () => {
};
const template = `
const $t0_attrs$ = [${AttributeMarker.Bindings}, "outDirective"];
function MyComponent_ng_template_0_Template(rf, ctx) { }
// ...
consts: [[${AttributeMarker.Bindings}, "outDirective"]],
template: function MyComponent_Template(rf, ctx) {
if (rf & 1) {
$i0$.ɵɵtemplate(0, MyComponent_ng_template_0_Template, 0, 0, "ng-template", $t0_attrs$);
$i0$.ɵɵtemplate(0, MyComponent_ng_template_0_Template, 0, 0, "ng-template", 0);
$i0$.ɵɵlistener("outDirective", function MyComponent_Template_ng_template_outDirective_0_listener($event) { return $event.doSth(); });
}
}`;
@ -746,8 +736,6 @@ describe('compiler compliance: template', () => {
};
const template = `
const $c0$ = [${AttributeMarker.Template}, "ngIf"];
function MyComponent_div_0_Template(rf, ctx) {
if (rf & 1) {
$i0$.ɵɵelement(0, "div");
@ -755,10 +743,10 @@ describe('compiler compliance: template', () => {
}
// ...
consts: [[${AttributeMarker.Template}, "ngIf"]],
template: function MyComponent_Template(rf, ctx) {
if (rf & 1) {
$i0$.ɵɵtemplate(0, MyComponent_div_0_Template, 1, 0, "div", $c0$);
$i0$.ɵɵtemplate(0, MyComponent_div_0_Template, 1, 0, "div", 0);
$i0$.ɵɵpipe(1, "pipe");
} if (rf & 2) {
$i0$.ɵɵproperty("ngIf", $i0$.ɵɵpipeBind1(1, 1, ctx.val));