vue 代码优化18条 -- 全面提高页面性能

查看本专栏目录

关于作者

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信，一起交流。

热门专栏	精彩推荐	图文案例
Openlayers综合(300+）	Cesium (200+)	Leaflet (150+)
MapboxGL (150+)	Canvas (100+)	Echarts (100+)
Openlayers基础(70+)	Geoserver服务	网络配置
HTML 杂货铺	javascript 精选	CSS布局动画
Vue概念详解	vue2 实战	vue3 实战

文章目录

• • 1. 路由懒加载
  • 2. 组件优化
  • 3. 生命周期钩子优化
  • 4. Keep-Alive 缓存
  • 5. 状态管理与计算属性
  • 6. 指令优化
  • 7. 静态资源优化
  • 8. 构建工具优化
  • 9. 错误处理与监控
  • 10. 网络请求优化
  • 11. 代码规范与审查
  • 12. 依赖管理
  • 13. 数据预取与缓存
  • 14. 服务端渲染(SSR)
  • 15. 移动端优化
  • 16. 代码拆分与动态加载
  • 17. 性能检测与监控
  • 18. PWA支持

Vue项目代码优化涉及多个层面，包括但不限于以下几点：

1. 路由懒加载

路由按需加载：通过动态导入(import())来分割代码块，使得每个路由对应的组件在用户实际访问到对应路由时才加载，而非一次性全部加载。这显著减小了首次加载的体积，提高了首屏加载速度。

Javascript
// 在Vue Router配置中使用
const User = () => import(‘@/views/User’)
const routes = [
{ path: ‘/user’, component: User }
]

2. 组件优化

合理划分组件：将复杂的组件拆分为更小粒度的子组件，确保组件的单一职责原则，降低冗余和复杂性。
复用组件：创建通用的可复用组件以减少代码量和重复渲染。
条件渲染：根据需要使用 v-if 或 v-show 控制组件的渲染，避免不必要的DOM操作和计算。

3. 生命周期钩子优化

避免在 created 和 mounted 钩子中执行大量耗时操作，这些操作可能导致界面卡顿，应考虑异步执行或使用 nextTick 等机制。

4. Keep-Alive 缓存

对于不需要每次切换时都重新渲染的组件，使用 进行缓存，避免不必要的初始化和销毁过程。

5. 状态管理与计算属性

使用 Vuex 进行状态管理，减少组件间的直接通信带来的性能开销。
合理利用 Vue 的计算属性和侦听器，避免在模板中做复杂的计算。

6. 指令优化

尽量减少不必要的 v-model 和 v-bind 更新，特别是在大规模列表渲染中。
使用 v-for 时提供唯一 key，以利于Vue内部高效的DOM更新策略。

7. 静态资源优化

图片懒加载：使用如 vue-lazyload 插件仅在图片进入视口时加载，减轻初始加载压力。
资源压缩合并：通过构建工具如Webpack进行CSS/JS压缩、代码分割、图片转为WebP格式等操作。
开启Gzip压缩：服务端启用Gzip压缩传输，降低网络传输大小。

8. 构建工具优化

使用Vue CLI提供的现代模式进行构建，开启tree shaking、代码压缩等功能。
配置Webpack或Vite时，排除生产环境不需要的SourceMap (devtool 设置)。

9. 错误处理与监控

异常捕获与上报，保证线上体验的同时收集异常信息用于后续分析和修复。
使用性能分析工具（如Chrome DevTools）分析性能瓶颈并针对性优化。

10. 网络请求优化

• HTTP缓存策略：设置合理的HTTP缓存头，利用浏览器缓存机制。
• 请求合并与延时发送：对于高频低优先级请求可以考虑合并或延时发送。

11. 代码规范与审查

遵循编码规范，编写易于理解和维护的代码，可通过ESLint等工具进行自动化检查。
定期进行代码审查，找出潜在的问题和冗余，保持代码质量。

12. 依赖管理

精简第三方库依赖，只引入必要的功能模块，避免“大而全”的库增加项目体积。
定期检查依赖库版本，及时升级至稳定版，获取性能改进和bug修复。

13. 数据预取与缓存

对于初次加载需要的数据，可以在路由导航守卫(navigation guards)中进行预取，提高页面渲染速度。
对于频繁请求且结果不变的数据，可以存储在本地缓存如localStorage或IndexedDB中，减少网络请求。

14. 服务端渲染(SSR)

对SEO有要求或者首屏加载速度要求较高的场景，可以采用Vue的服务端渲染，将Vue应用的部分逻辑在服务器端完成，返回HTML给客户端，从而加速首屏内容展示。

15. 移动端优化

移动端适配：采用响应式布局框架如Flex布局或Grid布局，并针对不同屏幕尺寸优化UI设计。
避免移动端滚动性能问题：使用Vue的内置指令v-bind:style="{‘transform’: 'translate3d(0, '+scrollY+‘px, 0)’}"实现平滑滚动，利用硬件加速。

16. 代码拆分与动态加载

动态引入CSS文件，避免样式阻塞渲染。
使用Webpack的SplitChunksPlugin对公共库进行拆分，使各个chunk共享相同的依赖库。

17. 性能检测与监控

利用Vue DevTools插件进行组件级别的性能分析。
结合Lighthouse、PageSpeed Insights等工具进行性能测试和评估。

18. PWA支持

根据项目需求，可以考虑将Vue应用转变为渐进式Web应用(PWA)，提供离线访问、推送通知等功能，提升用户体验。

通过上述18种方式，我们可以全面地从架构、性能、资源加载等多个方面对Vue项目进行优化，使其在保证功能完整性和用户体验的前提下，拥有更佳的运行效率和更快的加载速度。