减少初始化开销
更新时间：
应用的初始化代码越复杂，那么创建应用或者页面的时间就会越长，这会影响到首屏渲染时间。
不要引入自执行的模块
推荐级别：强烈
所有需要引入的文件，确保不要在文件中添加可执行的逻辑。因为这样子会占用页面创建时间，使您应用/首页的首屏变慢。
反例
// 这里的init是自执行的逻辑，会造成性能开销。
import './init.js'
export default {}复制代码
正例
export default {
onInit() {
// todo init
},
}复制代码
简化 app.ux 上的数据
推荐级别：强烈
只有应用全局共享的数据状态才有必要放在 app.ux 上，工具类方法切勿挂载到 app 上面。因为这个会使得应用地创建变慢。
反例
// app.ux
import uitls from './uitls'
export default {
uitls,
}复制代码
长页面分段加载
推荐级别：建议
先准备首屏的数据、模板和样式，等到首屏显示后再加载可视区域之外的内容。
正例 1
<template>
<div>
<div for="{{list}}">
<text>{{$item}}</text>
</div>
</div>
</template>
<script>
const listData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
export default {
data: {
list: [],
},
onInit() {
// 首屏展示一部分数据
this.list = listData.slice(0, 6)
},
onShow() {
// onShow 后显示所有数据
this.list = listData
},
}
</script>复制代码
正例 2
<template>
<div>
<div>part A</div>
<div if="{{showB}}">part B</div>
</div>
</template>
<script>
export default {
data: {
showB: false,
},
onShow() {
this.showB = true
},
}
</script>复制代码