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