优化1

不在页面中使用的数据，不要定义在组件的data函数中组件中，我们需要在script标签中定义不同是数据变量来使用，而不在template模板中使用的变量，可以不在组件的 data函数中定义，而是定义在script标签中的全局属性，因为不在页面中展示的变量是不用做到响应式数据的，也就可以减少Vue实例对不必要的数据进行数据劫持和数据代理

优化2

在Vue项目中，我们在开发环境的时候一般都会将包以node的方式去下载使用，但是如果在打包上线时，会发现一些包文件较大，而文件越大，对于网络带宽和访问速度的要求就越高，这也就是我们优化的方向。我们可以通过vue-cli本身提供的性能分析工具，对我们开发的所有功能进行打包分析
命令：npm run preview -- --report
执行命令会看到一个页面，如下图。方块越大，说明该文件占用的文件越大，这也就是我们优化的方向
我们可以将较大的包采用 CDN 的方式去引入，然后再 webpack 中去排除以 CDN 引入的包
例如 vue xlsx element 等包使用 CDN 方式引入

vue首屏加载空白

因为 js 是有阻塞性的，也就是js代码报错会影响后面代码的继续执行。而我们在网页中一般都会使用 CDN 的方式去引入 js 包，会在 head 标签或者 body 内去引入。
而在 head 标签中引入时如果使用的在线引用地址响应缓慢，就会导致页面的加载缓慢。
所以一般都是在 body 标签中的最后面去引入，避免影响页面结构的渲染。就可以让用户看到部分结构，而不是一片空白，这是其中优化点。
如果CDN使用的在线引用地址响应缓慢时，先加载的结构都是未经过 Vue 编译的，也就是说页面会原样显示我们书写的插值表达式，这样对用户来说也是一种不好的体验。
这时候就可以给标签绑定一个指令 v-cloak 这个指令保持在元素上直到关联实例结束编译。也就是 Vue 编译结束后这个指令也就会消失，这样我们就可以配合CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译标签直到实例准备完毕。就可以让用户看不到我们书写的插值表达式。优化点

优化不必要编译的结构

在组件中一般都会有一些没有绑定插值表达式，没有绑定事件，不需要任何交互，独立存在的标签结构，这里标签结构只是起到了固定展示的标签结构，这时候就可以给这类标签绑定指令 v-pre ，这可以跳过这个元素和它的子元素的编译过程。加快了组件的编译过程

遍历尽量使用唯一标识