一、vue-router路由懶加載
懶加載是當路由被訪問的時候才加載對應組件，而不是在首頁就全部加載，以此來提高首頁反應速度。
- 方法和原理
- require-ensure
- 說明: require.ensure在需要的時候才下載依賴的模塊，當參數指定的模塊都下載下來了（下載下來的模塊還沒執行），便執行參數指定的回調函數。require.ensure會創建一個chunk，且可以指定該chunk的名稱，如果這個chunk名已經存在了，則將本次依賴的模塊合併到已經存在的chunk中，最後這個chunk在webpack構建的時候會單獨生成一個文件。
- 語法:
require.ensure(dependencies: String[], callback: function([require]), [chunkName: String])- dependencies: 依賴的模塊數組
- callback: 回調函數，該函數調用時會傳一個require參數
- chunkName: 模塊名，用於構建時生成文件時命名使用
- 注意點：require.ensure的模塊只會被下載下來，不會被執行，只有在回調函數使用require(模塊名)後，這個模塊纔會被執行。
示例：
二、打包優化——工程文件打包的時候不生成.map文件
npm run build編譯之後，我們查看編譯生成的文件，發現有很多.map文件，這些文件佔了不小的空間。.map文件的作用是幫助編譯後的代碼調試，但是我們上線的代碼已經調試完成，所以上線時可以不生成.map文件。
修改配置文件如下即可：
三、切換多入口模式
在vue項目中，我們一般使用vue-cli腳手架搭建單頁面的web工程。生成的項目結構如下圖所示：
main.js是整個單頁面應用唯一的入口文件
在大型項目中，單一入口無法滿足項目需要，原因有以下兩方面：
（1）單一入口無法拆分按模塊獨立部署，不夠靈活
（2）單一入口負載過重，業務模塊較多時，點擊系統導航菜單頻繁切換業務模塊，在IE瀏覽器中，瀏覽器內存持續上漲，達到 1.5G以上卡頓，瀏覽器容易崩潰。
基於以上兩點原因，大型項目可以採用多入口的模式，好處有以下兩點：
（1）滿足頁面需要分開部署的場景
（2）解決了頁面卡頓和內存上漲問題
配置方式參考我的單獨講解多入口配置的博文
四、使用字體圖標代替切圖
字體圖標的優勢:
（1）字體圖標任意縮放不會失真
（2）在項目中導入後，以css樣式引用，相較於傳統的圖片大大減少請求數量，優化性能
（3）修改方便，如需要切換主題色可由css控制，避免視覺反覆切圖的工作量
在線生成工具: https://icomoon.io/app/#/select
五、使用雪碧圖
雪碧圖的優點:
- 將多張圖片合併到一張圖片中，可以減小圖片的總大小。
- 將多張圖片合併成一張圖片後，下載全部所需的資源，只需一次請求。可以減小建立連接的消耗。
六、提取公共樣式和方法
1.複用的樣式應當提取到公共的樣式表中複用
2.公共的方法應當提取到公共的js中複用
3.表單驗證的提取
七、控件銷燬
1.頁面切換釋放:
使用的C++控件應當及時銷燬
2. $destroy
完全銷燬一個實例,清理它與其它實例的連接，解綁它的全部指令及事件監聽器。
八、定時器銷燬
路由離開及時銷燬定時器
九、解綁事件
路由離開及時解綁事件:
vm.$off()
十、vue中使用keep-alive
vue2.0提供了一個keep-alive組件，用來緩存組件,避免多次加載相應的組件,減少性能消耗，但keep-alive是一把雙刃劍，確實需要緩存組件的時候才使用。
<keep-alive>
<component>
<!-- 組件將被緩存 -->
</component>
</keep-alive>
十一、代碼層面的優化
1、v-show，v-if 用哪個？
（1）只要涉及到權限相關的展示無疑要用 v-if
（2）在沒有權限限制時根據用戶點擊的頻次選擇，頻繁切換的使用 v-show，不頻繁切換的使用 v-if（減少頁面中 dom 數量）
2、不要在模板裏面寫過多的表達式與判斷
v-if="isShow && isAdmin && (a || b)"，這種表達式雖說可以識別，但是不是長久之計，當看着不舒服時，適當的寫到 methods 和 computed 裏面封裝成一個方法，這樣的好處是方便我們在多處判斷相同的表達式，其他權限相同的元素再判斷展示的時候調用同一個方法即可。
3、循環調用子組件時添加 key
key 可以唯一標識一個循環個體，可以使用例如 item.id 作爲 key，假如數組數據是這樣的 ['a' , 'b', 'c', 'a'],使用 :key="item" 顯然沒有意義，更好的辦法就是在循環的時候 (item, index) in arr，然後 :key="index"來確保key 的唯一性。不設置key值時vue會拋出警告。
4、遵守編碼規範
語義化標籤，避免亂嵌套，合理命名屬性,使用高效簡潔的css選擇器等等
5、合理利用vue生命週期
減少在created生命週期中做ajax請求,而是放在mounted生命週期中,以不阻塞頁面生成dom
十二、iframe的內存釋放
相關資料稱IE在iframe元素的回收方面存在着bug，需要手動將其釋放以避免內存泄漏
釋放方法：手動將iframe指向置空
