## 利用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,
}
```