在vue的项目中有哪些优化方式？

在vue的项目中有哪些优化方式？

主要包括：

Vue代码层面的优化、

webpack 配置层面的优化、

基础的 Web 技术层面的优化、

用户体验优化等

代码层面的优化：

v-if 和 v-show

computed 和 watch

不要将所有的数据放在 data 中，固定数据或者定时器等可设置于实例对象当中

keep-alive 缓存组件

v-for 遍历 key 设置，且避免同时使用 v-if

长列表利用 Object.freeze 冻结数据

监听对象的销毁

图片资源懒加载

路由懒加载，异步组件

第三方插件的按需引入

无限列表利用虚拟滚动列表实现

服务端渲染或预渲染

函数式组件应用

高频触发使用防抖、节流

事件委托

图片编码优化，尽量使用 svg 和字体图标

避免重定向以及 404 页面

动态注册组件

使用编程式导航代替声明式导航

前端表单验证，减少请求处理

Webpack 层面的优化

文件压缩，包括图片、css、js、html 等

减少 ES6 转为 ES5 的冗余代码

提取公共代码

模板预编译

模块文件的提取，包括 css、第三方 js 库等

优化 SourceMap

构建结果输出分析

基础的 Web 技术层面的优化

开启 gzip 压缩

浏览器缓存

CDN 的使用

使用 Chrome Performance 查找性能瓶颈