vue代碼優化問題

一、vue代碼層面

1、路由懶加載

當打包建構應用時，Javascript 包會變得非常大，影響頁面加載。如果我們能把不同路由對應的元件分割成不同的代碼塊，然後當路由被通路的時候才加載對應元件，這樣就更加高效了。

2、代碼子產品化

咱們可以把很多常用的地方封裝成單獨的元件，在需要用到的地方引用，而不是寫過多重複的代碼，每一個元件都要明确含義，複用性越高越好，可配置型越強越好，包括咱們的css也可以通過less和sass的自定義css變量來減少重複代碼。

3、for循環設定key值

在用v-for進行資料周遊渲染的時候，為每一項都設定唯一的key值，為了讓Vue内部核心代碼能更快地找到該條資料，當舊值和新值去對比的時候，可以更快的定位到diff。

4、更加了解Vue的生命周期

vue元件銷毀時，會自動解綁他的全部指令及時間監聽器，但是僅限于時間本身的事件，定時器的銷毀需要手動去除

不要造成内部洩漏，使用過後的全局變量在元件銷毀後重新置為null

5、可以使用keep-alive

keep-alive是Vue提供的一個比較抽象的元件，用來對元件進行緩存，進而節省性能。

6、節流防抖

7、圖檔的懶加載

使用vue-lazyload庫

8、無狀态的元件标記為函數式元件

可以提高性能，減少記憶體的消耗

<template functional>

</template>      

9、合理利用計算屬性的依賴緩存

二、打包層面

檢視打封包件結構 和 各種檔案的比例

這裡推薦使用 ​​webpack-bundle-analyzer​​，通過她可以檢視打封包件的子產品組成，找出不和時宜的存在，然後優化她。

首先 npm install --save-dev webpack-bundle-analyzer

然後運作 ​​

​npm run build --report​

​ 指令會自動打包，并彈出網頁（包含打封包件圖）

這裡是因為 webpack-bundle-analyzer 的配置 vue-cli(2.0)已經幫你配置好了，傳入一個report參數 就可以啟動了

1使用cdn的方式外部加載一些資源

比如vue-router、axios等Vue的周邊插件，在webpack.config.js裡面，externals裡面設定一些不必要打包的外部引用子產品。然後在入門檔案index.html裡面通過cdn的方式去引入需要的插件

externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'vuex': 'Vuex',
    'axios': 'axios',
}      

2、不讓css打包在一起(讓css檔案和單檔案打包在一起)

預設css會打包到一個css 裡面，一個就太大了

是以 在 webpack.prod.conf.js 裡面把所有塊打包在一起設定為false

allChunks: false,      

3、不生成.map檔案

webpack預設會生成map檔案，map檔案是用來調試代碼的，把productionSourceMap設定為false。此外，這裡還要注意sourcemap的配置分 開發（dev）和線上（build）兩個地方配置，開發我們就不管了，就用預設的，線上我們是不需要這個代碼的。

4、減少圖檔使用

因為對于網頁來說，圖檔會占用很大一部分體積，是以，優化圖檔的操作可以有效的來加快加載速度。可以用一些css3的效果來代替圖檔效果，或者使用雪碧圖來減少圖檔的體積。

5、按需引入

咱們使用的一些第三方庫可以通過按需引入的方式加載。避免引入不需要使用的部分，無端增加項目體積。比如在使用element-ui庫的時候，包括loadsh等工具庫可以隻引入需要用到的元件。