fix(compiler): share identical stylesheets between components in the same file (#38213)

Prior to this commit, duplicated styles defined in multiple components in the same file were not
shared between components, thus causing extra payload size. This commit updates compiler logic to
use `ConstantPool` for the styles (while generating the `styles` array on component def), which
enables styles sharing when needed (when duplicates styles are present).

Resolves #38204.

PR Close #38213
This commit is contained in:
Andrew Kushnir
2020-07-23 18:51:55 -07:00
committed by Misko Hevery
parent 84c5be0b5b
commit 264950bbf2
5 changed files with 70 additions and 6 deletions

View File

@ -316,5 +316,5 @@ function isVariable(e: o.Expression): e is o.ReadVarExpr {
function isLongStringExpr(expr: o.LiteralExpr): boolean {
return typeof expr.value === 'string' &&
expr.value.length > POOL_INCLUSION_LENGTH_THRESHOLD_FOR_STRINGS;
expr.value.length >= POOL_INCLUSION_LENGTH_THRESHOLD_FOR_STRINGS;
}

View File

@ -231,7 +231,7 @@ export function compileComponentFromMetadata(
const styleValues = meta.encapsulation == core.ViewEncapsulation.Emulated ?
compileStyles(meta.styles, CONTENT_ATTR, HOST_ATTR) :
meta.styles;
const strings = styleValues.map(str => o.literal(str));
const strings = styleValues.map(str => constantPool.getConstLiteral(o.literal(str)));
definitionMap.set('styles', o.literalArr(strings));
} else if (meta.encapsulation === core.ViewEncapsulation.Emulated) {
// If there is no style, don't generate css selectors on elements