一、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等工具庫可以只引入需要用到的組件。