如果存在對性能要求很高的頁面,可以通過配置 turboPages
選項對某些頁面啟動性能優(yōu)化。如:
// remax.config.jsmodule.exports = {turboPages: ['pages/index/index', 'pages/index2/*'],};
上述配置將會對 pages/index/index
以及 pages/index2/
下的所有頁面做性能優(yōu)化。
啟動性能優(yōu)化存在如下限制,建議沒有很迫切的性能需求不要輕易開啟這個選項。
- 目前只支持 支付寶 平臺使用。
- 開啟性能優(yōu)化的頁面,不能利用 react 動態(tài)特性 對 dom 結(jié)構(gòu)做出修改
關(guān)于第二點限制的一些 case:
function Component({ children }) {return <View>{React.Children.map(children, child => (<View>{child}</View>))}</View>}...<Component><View>view 1</View><View>view 2</View></Component>
function Component({ children }) {return <View>{React.Children.map(children, child => (React.cloneElement(child, { onInput: () => {} })))}</View>}...<Component><Input /></Component>
如果你想讓這種修改屬性的行為可以運作,需要修改為:
function Component({ children }) {return <View>{React.Children.map(children, child => (React.cloneElement(child, { onInput: () => {} })))}</View>}...<Component>{({ onInput }) =><Input onInput={onInput} />}</Component>
可以看到優(yōu)化性能的同時會犧牲 React 的動態(tài)性,因此開發(fā)者需要做出取舍。
更多建議: