## 利用Object.freeze()
对于data或vuex里使用freeze冻结的对象，vue不会做getter和setter的转换。
如果有一个巨大的数组或Object，并且确信数据不会修改，使用Object.freeze()可以让性能大幅提升。在我的实际开发中，这种提升大约有5~10倍，倍数随着数据量递增。
```html
<p v-for="item in list">{{ item.value }}</p>
```
```js
new Vue({
data: {
// vue不会对list里的object做getter、setter绑定
list: Object.freeze([
{ value: 1 },
{ value: 2 }
])
},
created () {
// 界面不会有响应
this.list[0].value = 100;
// 下面两种做法，界面都会响应
this.list = [
{ value: 100 },
{ value: 200 }
];
this.list = Object.freeze([
{ value: 100 },
{ value: 200 }
]);
}
})
```
## 首屏优化(按需模块加载)
webpack默认将所有js源代码打包成一个js文件，导致JS包会变得非常大，影响页面首次加载速度。
懒加载能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件的js文件。
>具体做法： 修改路由配置文件，将模块的import代码改写
路由组件懒加载：
```js
// 将 import Recommend form ''components/recommend/recommend'' 改为
const Recommend = (resolve) => {
import('components/recommend/recommend').then((module) => {
resolve(module)
})
}
// 路由配置
{
path: '/recommend',
component: Recommend,
}
```
