Vue项目性能优化总结

·  阅读 100

这是我参与8月更文挑战的第2天,活动详情查看:8月更文挑战

博主相关个人技术博客、微信公众号、视频号、设计作品集

vue项目性能优化--可以从四个方面阐述:

  • 编码阶段
  • SEO优化
  • 打包优化
  • 用户体验

1、编码阶段

  • 尽量减少data中的数据,data中的数据都会增加getter和setter,会收集对应的watcher
  • v-ifv-for不能连用
  • 如果需要使用v-for给每项元素绑定事件时使用事件代理
  • SPA 页面采用keep-alive缓存组件
  • 在更多的情况下,使用v-if替代v-show
  • key保证唯一
  • 使用路由懒加载、异步组件
  • 防抖、节流
  • 第三方模块按需导入
  • 长列表滚动到可视区域动态加载
  • 图片懒加载

2、SEO优化

  • 预渲染
  • 服务端渲染SSR (node、renderer)

3、打包优化

  • 压缩代码
  • 摇树优化Tree Shaking、作用域提升Scope Hoisting
  • 使用cdn加载第三方模块 DllPlugin
  • 多线程打包 thread-loader/happypack
  • 多进程并行压缩代码 terser-webpack-plugin
  • splitChunks 抽离公共文件
  • sourceMap优化
  • cache缓存: babel缓存、teser缓存、模块缓存 hard-source

1)屏蔽sourceMap(线上环境不让debug)

在vuejs项目的config目录下有三个文件dev.env.js(开发环境配置文件)、prod.env.js(上线配置文件)、index.js(通用配置文件) 在build对象中的配置信息中,productionSourceMap修改成false:

2)对项目代码中的JS/CSS/SVG(*.ico)文件进行gzip压缩

  • index.js的通用配置,productionGzip设置为true

  • 但是首先需要对compress-webpack-plugin支持

  • 所以需要通过 npm install --save-dev compression-webpack-plugin

3)对路由组件进行懒加载

优点是可以减少app.[hash].js体积,缺点就是会把其它js分开打包,造成多个js文件,会有多次https请求。如果项目比较大,需要注意懒加载的效果。

- vue异步组件resolve: resolve => require([@/views/login],resolve)

- ESimport'map-marker': () => import('../../components/Mapper/marker’)

- webpack中的魔法注释: () => import( /* webpackChunkName: "uninvited" */ "../views/uninvited/Index.vue” )
复制代码

4、用户体验

  • 骨架屏
  • PWA(渐进式web应用)
  • 还可以使用缓存(客户端缓存、服务端缓存)优化、服务端开启gzip压缩等。
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改