减少初始化开销
更新时间：
应用的初始化代码越复杂，那么创建应用或者页面的时间就会越长，这会影响到首屏渲染时间。
不要引入耗时的自执行的模块
推荐级别：强烈
确保所有需要引入的文件中不包含耗时的自执行逻辑。因为耗时的自执行模块会在页面创建的过程中执行，从而延长页面的加载时间。
反例
// 这里的init是自执行的逻辑，会造成性能开销。
import './init.js'
export default {}复制代码
正例
export default {
onInit() {
// todo init
},
}复制代码
合理管理 app.ux 上的数据
推荐级别：建议
在app.ux中引入过多js，会延长应用的启动时间，从而影响应用的首屏显示时间。
建议全局共享的状态放在app.ux上，而工具类方法可以在各个页面中独立引入。
反例
// 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>复制代码