例如，我有一个像这样的ES6 Harmony JSX片段：
export class Curve extends Component {
render() {
return (
<svg xmlns="http://www.w3.org/2000/svg" width={216} height={232}
viewBox="0 0 216 232">
<defs>
<pattern id="a" width={34} height={34} patternUnits="userSpaceOnUse"
viewBox="0 0 34 34">
<rect width={34} height={34} style={{fill: 'none'}}/>
<line x1="10.55" y1="-177.3" x2="-174.05" y2="7.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="27.55" y1="-177.3" x2="-157.05" y2="7.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="44.55" y1="-177.3" x2="-140.05" y2="7.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="61.55" y1="-177.3" x2="-123.05" y2="7.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="78.55" y1="-177.3" x2="-106.05" y2="7.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="95.55" y1="-177.3" x2="-89.05" y2="7.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="112.55" y1="-177.3" x2="-72.05" y2="7.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="129.55" y1="-177.3" x2="-55.05" y2="7.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="146.55" y1="-177.3" x2="-38.05" y2="7.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="163.55" y1="-177.3" x2="-21.05" y2="7.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="180.55" y1="-177.3" x2="-4.05" y2="7.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="197.55" y1="-177.3" x2="12.95" y2="7.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="214.55" y1="-177.3" x2="29.95" y2="7.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="2.05" y1="-160.3" x2="-182.55" y2="24.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="19.05" y1="-160.3" x2="-165.55" y2="24.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="36.05" y1="-160.3" x2="-148.55" y2="24.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="53.05" y1="-160.3" x2="-131.55" y2="24.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="70.05" y1="-160.3" x2="-114.55" y2="24.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="87.05" y1="-160.3" x2="-97.55" y2="24.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="104.05" y1="-160.3" x2="-80.55" y2="24.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="121.05" y1="-160.3" x2="-63.55" y2="24.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="138.05" y1="-160.3" x2="-46.55" y2="24.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="155.05" y1="-160.3" x2="-29.55" y2="24.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="172.05" y1="-160.3" x2="-12.55" y2="24.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="189.05" y1="-160.3" x2="4.45" y2="24.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="206.05" y1="-160.3" x2="21.45" y2="24.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="10.55" y1="-143.3" x2="-174.05" y2="41.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="27.55" y1="-143.3" x2="-157.05" y2="41.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="44.55" y1="-143.3" x2="-140.05" y2="41.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="61.55" y1="-143.3" x2="-123.05" y2="41.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="78.55" y1="-143.3" x2="-106.05" y2="41.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="95.55" y1="-143.3" x2="-89.05" y2="41.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="112.55" y1="-143.3" x2="-72.05" y2="41.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="129.55" y1="-143.3" x2="-55.05" y2="41.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="146.55" y1="-143.3" x2="-38.05" y2="41.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="163.55" y1="-143.3" x2="-21.05" y2="41.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="180.55" y1="-143.3" x2="-4.05" y2="41.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="197.55" y1="-143.3" x2="12.95" y2="41.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="214.55" y1="-143.3" x2="29.95" y2="41.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="2.05" y1="-126.3" x2="-182.55" y2="58.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="19.05" y1="-126.3" x2="-165.55" y2="58.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="36.05" y1="-126.3" x2="-148.55" y2="58.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="53.05" y1="-126.3" x2="-131.55" y2="58.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="70.05" y1="-126.3" x2="-114.55" y2="58.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="87.05" y1="-126.3" x2="-97.55" y2="58.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="104.05" y1="-126.3" x2="-80.55" y2="58.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="121.05" y1="-126.3" x2="-63.55" y2="58.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="138.05" y1="-126.3" x2="-46.55" y2="58.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="155.05" y1="-126.3" x2="-29.55" y2="58.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="172.05" y1="-126.3" x2="-12.55" y2="58.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="189.05" y1="-126.3" x2="4.45" y2="58.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="206.05" y1="-126.3" x2="21.45" y2="58.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="10.55" y1="-109.3" x2="-174.05" y2="75.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="27.55" y1="-109.3" x2="-157.05" y2="75.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="44.55" y1="-109.3" x2="-140.05" y2="75.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="61.55" y1="-109.3" x2="-123.05" y2="75.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="78.55" y1="-109.3" x2="-106.05" y2="75.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="95.55" y1="-109.3" x2="-89.05" y2="75.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="112.55" y1="-109.3" x2="-72.05" y2="75.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="129.55" y1="-109.3" x2="-55.05" y2="75.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="146.55" y1="-109.3" x2="-38.05" y2="75.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="163.55" y1="-109.3" x2="-21.05" y2="75.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="180.55" y1="-109.3" x2="-4.05" y2="75.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="197.55" y1="-109.3" x2="12.95" y2="75.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="214.55" y1="-109.3" x2="29.95" y2="75.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="2.05" y1="-92.3" x2="-182.55" y2="92.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="19.05" y1="-92.3" x2="-165.55" y2="92.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="36.05" y1="-92.3" x2="-148.55" y2="92.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="53.05" y1="-92.3" x2="-131.55" y2="92.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="70.05" y1="-92.3" x2="-114.55" y2="92.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="87.05" y1="-92.3" x2="-97.55" y2="92.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="104.05" y1="-92.3" x2="-80.55" y2="92.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="121.05" y1="-92.3" x2="-63.55" y2="92.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="138.05" y1="-92.3" x2="-46.55" y2="92.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="155.05" y1="-92.3" x2="-29.55" y2="92.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="172.05" y1="-92.3" x2="-12.55" y2="92.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="189.05" y1="-92.3" x2="4.45" y2="92.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="206.05" y1="-92.3" x2="21.45" y2="92.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="10.55" y1="-75.3" x2="-174.05" y2="109.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="27.55" y1="-75.3" x2="-157.05" y2="109.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="44.55" y1="-75.3" x2="-140.05" y2="109.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="61.55" y1="-75.3" x2="-123.05" y2="109.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="78.55" y1="-75.3" x2="-106.05" y2="109.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="95.55" y1="-75.3" x2="-89.05" y2="109.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="112.55" y1="-75.3" x2="-72.05" y2="109.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="129.55" y1="-75.3" x2="-55.05" y2="109.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="146.55" y1="-75.3" x2="-38.05" y2="109.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="163.55" y1="-75.3" x2="-21.05" y2="109.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="180.55" y1="-75.3" x2="-4.05" y2="109.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="197.55" y1="-75.3" x2="12.95" y2="109.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="214.55" y1="-75.3" x2="29.95" y2="109.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="2.05" y1="-58.3" x2="-182.55" y2="126.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="19.05" y1="-58.3" x2="-165.55" y2="126.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="36.05" y1="-58.3" x2="-148.55" y2="126.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="53.05" y1="-58.3" x2="-131.55" y2="126.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="70.05" y1="-58.3" x2="-114.55" y2="126.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="87.05" y1="-58.3" x2="-97.55" y2="126.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="104.05" y1="-58.3" x2="-80.55" y2="126.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="121.05" y1="-58.3" x2="-63.55" y2="126.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="138.05" y1="-58.3" x2="-46.55" y2="126.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="155.05" y1="-58.3" x2="-29.55" y2="126.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="172.05" y1="-58.3" x2="-12.55" y2="126.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="189.05" y1="-58.3" x2="4.45" y2="126.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="206.05" y1="-58.3" x2="21.45" y2="126.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="10.55" y1="-41.3" x2="-174.05" y2="143.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="27.55" y1="-41.3" x2="-157.05" y2="143.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="44.55" y1="-41.3" x2="-140.05" y2="143.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="61.55" y1="-41.3" x2="-123.05" y2="143.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="78.55" y1="-41.3" x2="-106.05" y2="143.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="95.55" y1="-41.3" x2="-89.05" y2="143.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="112.55" y1="-41.3" x2="-72.05" y2="143.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="129.55" y1="-41.3" x2="-55.05" y2="143.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
</pattern>
</defs>
<title>g-force</title>
<path d="M1324,1663a108,108,0,1,0,108,108V1663H1324Zm0,200a92,92,0,1,1,92-92A92,92,0,0,1,1324,1863Z"
transform="translate(-1216 -1647)" style={{fill: '#130726', opacity: '0.7'}}/>
<g>
<path d="M1346,1647h74a12,12,0,0,1,12,12v0a12,12,0,0,1-12,12h-74a0,0,0,0,1,0,0v-24a0,0,0,0,1,0,0Z"
transform="translate(1562 1671) rotate(-180)" style={{fill: '#100028'}}/>
<text transform="translate(144.51 18)"
style={{fontSize: 16, fill: '#fff', fontFamily: 'Whitney', fontWeight: 700}}>GFORCE</text>
</g>
<path
d="M1324,1679a92,92,0,1,0,92,92A92,92,0,0,0,1324,1679Zm0,160a68,68,0,1,1,68-68A68,68,0,0,1,1324,1839Z"
transform="translate(-1216 -1647)" style={{fill: '#130726', opacity: '0.5'}}/>
<circle cx={108} cy={124} r={68} style={{fill: '#130726', opacity: '0.7'}}/>
<g style={{opacity: '0.7'}}>
<path
d="M1324,1680a91,91,0,1,1-91,91,91.1,91.1,0,0,1,91-91m0-1a92,92,0,1,0,92,92,92,92,0,0,0-92-92h0Z"
transform="translate(-1216 -1647)" style={{fill: '#fff'}}/>
</g>
<g>
<rect x={32} y={116} width={16} height={16} rx={8} ry={8} style={{fill: '#100028'}}/>
<text transform="translate(34.97 127.9)"
style={{fontSize: 12, fill: '#fff', fontFamily: 'Tungsten'}}>0.5
</text>
</g>
<path
d="M1342.88,1721.48c27.35,10.43,49.32,53.09,41.85,72.68s-52.27,36.79-79.62,26.37A53,53,0,0,1,1342.88,1721.48Z"
transform="translate(-1216 -1647)"
style={{stroke: '#ffff0b', strokeMiterlimit: 10, fill: 'url(#a)'}}/>
<circle cx={108} cy={124} r={44} style={{fill: '#100028'}}/>
<circle cx={168} cy={150} r={6} style={{fill: '#ffff15'}}/>
<g>
<rect x={8} y={116} width={16} height={16} rx={8} ry={8} style={{fill: '#100028'}}/>
<text transform="translate(11.84 127.9)"
style={{fontSize: 12, fill: '#fff', fontFamily: 'Tungsten'}}>1.0
</text>
</g>
<g>
<path d="M1311,1761.66h-2.22v-1.38H1311V1758h1.44v2.28h2.22v1.38h-2.22v2.28H1311v-2.28Z"
transform="translate(-1216 -1647)" style={{fill: '#fff'}}/>
<text transform="translate(101.55 119.93)"
style={{fontSize: 28, fill: '#fff', fontFamily: 'Tungsten'}}>0
.
46
</text>
<text transform="translate(79 119.93)"
style={{fontSize: 18, fill: '#ffff15', fontFamily: 'Tungsten'}}>X
</text>
<text transform="translate(79 147)" style={{fontSize: 18, fill: '#ffff15', fontFamily: 'Tungsten'}}>
Y
</text>
<text transform="translate(101.55 147.4)"
style={{fontSize: 28, fill: '#fff', fontFamily: 'Tungsten'}}>0.68
</text>
<rect x="92.74" y="118.55" width="5.87" height="1.38" style={{fill: '#5a5368'}}/>
<path d="M1311,1789.12h-2.22v-1.38H1311v-2.28h1.44v2.28h2.22v1.38h-2.22v2.28H1311v-2.28Z"
transform="translate(-1216 -1647)" style={{fill: '#fff'}}/>
<rect x="92.74" y="146.02" width="5.87" height="1.38" style={{fill: '#5a5368'}}/>
</g>
</svg>
)
}
}
可以看出，使用了很多JSX内联样式。使用Webpack编译阶段非常慢。除了编译之外，我只是想知道如果我在任何地方都使用JSX内联样式，渲染是否会有很大的开销。
有没有人有这方面的想法？谢谢！
答案 0 :(得分：0)
在某些UI块中，内联CSS被认为是好的。通常称为关键CSS，可以提高应用程序的感知性能。
内联所有 CSS并不是一个好主意。您可能会发送大量重复数据。而且您将无法使用缓存这些资源/数据。
HTML中的重复数据主要是通过g-zipping来否定，如果你正在缓存整个html页面本身，可以否定不单独缓存CSS的问题。但并非完全如此，CSS将在每个页面上重新下载。
为什么要使用这么多内联样式呢？看起来你可以创建大约4个css类并将它们作为className应用于元素？